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);

Answer 1

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.