Semantic UI react - implement popup on dropdown select

Question

I have a dropdown with a few options using semantic-ui-react. I want to be able to show the user a brief description on the choice they made after selection from the dropdown. Semantic also has a <Popup/> module that I've been trying to use along with <Dropdown/> to make this work.

I'm looking through the prop list of the dropdown module and don't see anything in particular that fits my case. I've tried using dropdown inside of popup, but with no luck.

Sandbox with the example: https://codesandbox.io/s/5zo52qyrxk

import React from "react";
import ReactDOM from "react-dom";
import { Dropdown, Popup, Input } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

import "./styles.css";

const offsetOptions = [
  {
    text: "fromEarliest",
    value: "fromEarliest"
  },
  {
    text: "fromLatest",
    value: "fromLatest"
  }
];

const DropdownExample = () => (
  <Dropdown
    placeholder="Select offset position"
    clearable
    fluid
    selection
    options={offsetOptions}
    header=" Something about offset "
  />
);

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      offset: ""
    };
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <fieldset>
            <h1> Implement Popup on this Dropdown - semantic ui </h1>
            <DropdownExample />
          </fieldset>
        </div>
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Are you trying to have a popup appear when the user hovers over a dropdown option? Or are you trying to have a popup display when the user hovers over the entire dropdown input? — MEnf
– MEnf, Commented Feb 22, 2019 at 16:12
That's a good question, I'm leaning towards the former, so when the dropdown list is expanded and the option are visible, on hover of each of them display a brief description — DJ2
– DJ2, Commented Feb 22, 2019 at 16:13

MEnf · Accepted Answer · 2019-02-22 16:23:09Z

4

If you're trying to show a popup on each dropdown option, then you can use the subcomponent API to create the dropdown options rather than using the options prop.

<Dropdown text='File'>
  <Dropdown.Menu>
    <Popup trigger={<Dropdown.Item text='Close' description="Close" value="Close" />} content="Hello there" />
    <Popup trigger={<Dropdown.Item text='Open' description='Open' value="Open" />} content="Open me"/>
    {/* more options would go here... */}
  </Dropdown.Menu>
</Dropdown>

There is a warning on the Semantic-UI-React site that states

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

So I would take this suggestion with a grain of salt, but it does seem to accomplish what you're looking for.

answered Feb 22, 2019 at 16:23

MEnf

1,5321 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Over a year ago

Ding ding ding ding!

MEnf Over a year ago

This is how you would show a popup for each dropdown option, however I would also suggest using the description attribute for the dropdown option if you're just trying to add some detail to each option. In your options array where you define each option object, you would simply add a property to the object such as { ...option, description: "This is my description"}

DJ2 Over a year ago

If you revisit my original sandbox I posted, the description text to the right is perfectly fine, I don't know how I didnt think of this.

Dabrule · Accepted Answer · 2021-07-30 16:03:00Z

Here is a solution that allows you to use a <Popup/> inside your <Dropdown.Item/> while still using the shorthand props like options, value and onChange:

// Main component
const DropdownWithPopups = ({ className, options, value, onChange, ...props }) => {
  return (
    <Dropdown
      className='dropdown-with-popups'
      selection
      options={options}
      value={value}
      onChange={onChange}
      {...props}
    />
  );
};

// Popup that will be inside the default <Item/>
const ItemPopup = ({ text, popupContent }) => {
  return (
    <Popup
      basic
      position='left center'
      hoverable
      pinned
      trigger={(
        <div className='item-popup-trigger'>
          {text}
        </div>
      )}
      content={(
        <div className='item-popup-content'>
          {popupContent}
        </div>
      )}
      popperModifiers={{
        preventOverflow: {
          boundariesElement: 'window',
        },
      }}
    />
  );
};

// What your options should look like
const getOptions = (optionsData) => {
  return _.map(optionsData, (option) => {
    return {
      value: option.value,
      // `text` so the selected option is displayed
      text: option.text,
      // `children`is incompatible with `text` prop, so Semantic UI React will throw a warning,
      // but it works as expected
      children: (
        <ItemPopup
          text={option.text}
          // whatever you need to render inside your Popup
          popupContent={...}
        />
      ),
    };
  });
};

However I only tested this on an old version of semantic-ui-react (v0.88.2)

tyomka896 · Accepted Answer · 2021-08-08 11:33:30Z

Actually there is another way to render items of dropdown with popups with using additional parameter content during data mapping

For example you have some received data to place in dropdown, then map of options would be:

const options = data.map(elem => ({
    key: elem.id,
    text: elem.name,
    value: elem.name,
    content: (
        <Popup
            content={ elem.example }
            trigger={ <div>{ elem.name }</div> } />
    ),
})

this.setState({
    dropdown: {
        options: options
    }
})

Then pass options as <Dropdown /> parameter:

<Dropdown
    fluid
    selection
    placeholder="Data"
    options={ this.state.dropdown.options }
    value={ this.state.dropdown.selected } />

Collectives™ on Stack Overflow

Semantic UI react - implement popup on dropdown select

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related