Semantic-ui-react: Dropdown inside a menu does not close.

[ditiem]

✔ BUGS → This form is required:

Steps

Create a Dropdown inside the menu (you can edit one of the examples of https://react.semantic-ui.com/modules/dropdown )

It fails when: !vertical AND direction is set

I suspect (I dont know how Semantic -UI works inside) this piece of CSS is making the problem:

.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: auto!important;
}

The case it does not work is when the menu is shown / hidden by a dropbox. In this case the dropbox controls de "display"

Expected Result

The Dropdown closes/open when clicking on it

Actual Result

The Dropdonw always appears open

Version

0.79.0 (it works on 0.78.0!)

Testcase

https://codesandbox.io/s/3x980o243p

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[brianespinosa]

@ditiem The menu is staying open because you are specifying a direction prop on the Dropdown, which in this use case is not supposed to be there. Remove that and it will work.

[ditiem]

@brianespinosa I do not get what you are saying. direction is there for a reason.

This is an example from the docs
( https://react.semantic-ui.com/modules/dropdown#dropdown-example-menu-direction )

<Menu>
      <Dropdown item simple text='Left menu' direction='right' options={options} />
      <Menu.Menu position='right'>
        <Dropdown **simple** item  text='Right menu' direction='right' options={options} />
      </Menu.Menu>
 </Menu>

If I remove the "simple" style because I want the menu to open by click rather than hover, the bug appears.

It was working perfectly on the previous version.

[brianespinosa]

@ditiem when a dropdown is inside a Menu as a <Dropdown item /> the direction of the menu is automatically controlled in the CSS by SUI core styles. So it's actually not needed in this case. In your Codesandbox you did you have a Menu.Menu but that is the component that will implicitly control the direction based on the classes from the CSS.

Another thing I noticed in your Codesandbox example is you are using the fluid and selection props. The selection prop is not something you want to use when rendering a Dropdown as an item as you can see it is adding an extra drop shadow and border radiusing. The fluid prop is making it go to the full width of your menu. Maybe you wanted to do that, but I am guessing not.

I updated your Codesandbox example to show that you that the direction prop is not being used when a dropdown is inside a menu (I also removed the selection and fluid props): https://codesandbox.io/s/kovr3on5xo

[ditiem]

@brianespinosa Thanks for the explanation. I will survive with the Codesandbox example you did.

As a couple of notes:

1- Yes the fluid is intended. Reason is that the dropbox to not resize to the size of its children (that is what I expect from a dropbox vs a submenu), so I had to force the Menu.Menu to a certain size so when it opens it "makes sense" (otherwise the whole resize when selecting an option)

2- Yes, the selection was intended too. I was trying to do a toolbar. In a toolbar you may have buttons and dropdown, so I wanted them to be differentiated, as dropbox may appear empty and it was a long-white-space with an arrow at the end. I have had to make separated Menu with margins between them.

I think Semantic UI is mixing Menus, Dropdowns and "toolbars" concepts. Many simple things are very complicated or simply not possible.

Really thank you a lot for your help. I can keep going on now :)

[eclewlow]

This appears for me also. Just as @ditiem mentioned, the CSS is overriding the display property, which causes the menu to appear and stay open.

@brianespinosa

the direction of the menu is automatically controlled in the CSS by SUI core styles

The menu appears cut off in my case (the CSS is not working correctly), so I have to specify direction="left"

My code

<Menu>
    <Dropdown>...</Dropdown>
    <Menu.Menu position='right'>
        <Dropdown item direction='left'>
            <Dropdown.Menu>
                <Dropdown.Item content="Manage Users..."/>
            </Dropdown.Menu>
        </Dropdown>
    </Menu.Menu>
</Menu>

[ditiem]

@eclewlow It only works if you put it exactly in the way they are expecting (in previous versions it was more flexible).

For your case, the Dropdown item is missing a text prop. Also have to remove the direction='left'.

Try with this:

<Dropdown item text="More">
      <Dropdown.Menu>
          <Dropdown.Item content="Manage Users..." />
      </Dropdown.Menu>
</Dropdown>

[smogg]

I'm running into the same issue and I don't see it being addressed in this issue. I ended up fixing the problem by forcing visibility on the toggled element:

.item.dropdown

  .menu.left
    display none !important

    &.visible
      display: flex !important

[semireg]

Here's what I'm using:

.item.dropdown, .menu.left, .menu.right {
  display: none !important;
}

.item.dropdown, .menu.left.visible, .menu.right.visible {
  display: flex !important;
}

Praise the @smogg!

[alexboots]

Added a CSS fix to close it when clicking on the root menu icon (per above @smogg <3 )
But perhaps a separate issue ? it doesn't close when clicking outside of the menu on mobile.