Search code examples
javascriptreactjsdropdownsemantic-ui

Dropdown menu in React not showing


I'm trying to create a simple dropdown menu in a card element but am having issues getting the menu to actually show up. I inspected it on Chrome and it says the menu is there but I can't get it to show up on the screen.

constructor(props) {
    super(props);
    this.state = {
        loading: true,
        open: false
    };
}

    toggleDropDown = () => {
    this.setState({ open: !this.state.open });
};

<div className="content">
     <div
         onClick={event => {
             event.stopPropagation();
         }}
         onFocus={() => {
             this.toggleDropDown();
         }}
         onBlur={() => {
             this.toggleDropDown();
         }}
         tabIndex="0"
         className="ui right floated dropdown" >
         <i className="ellipsis vertical icon" />
              {this.state.open ? (
                    <div className="menu">
                         <div className="item">
                              <i className="edit icon" /> Edit Post
                         </div>
                         <div className="item">
                              <i className="delete icon" />Remove Post
                         </div>
                         <div className="item">
                              <i className="hide icon" /> Hide Post
                         </div>
                    </div>
              ) : null}
        </div>
        <div className="header">{schedule.title}</div>
        <div className="description">
              <p>{schedule.description}</p>
        </div>
        <div className="meta">
             <span className="right floated time">
                   {moment(schedule.date).fromNow()}
             </span>
       </div>
 </div>

This is a screenshot of the card I am producing (div with classname content is all that shows up in the picture). Reactjs dropdown menu


Solution

  • The issue is that .menu, although it is appearing in the inspector, is set to display: none.

    Here's me disabling the property.

    enter image description here

    And here's the menu displaying as expected:

    enter image description here

    Here's a crude fix showing that it's a display issue: CodeSandbox Demo.