Semantic-ui-react: Simple Dropdown Item Doesn't Close OnClick

[kschrader02]

Bug Report

Steps

I have a menu with a dropdown menu inside. It is simple and an item. It works this way in the simple dropdown example here: https://react.semantic-ui.com/modules/dropdown#types-simple

Expected Result

I expect that upon clicking a dropdown item inside this menu that the menu would close, similar to what happens when you click an item in a non-simple dropdown

Actual Result

It stays open

Version

@types/semantic-ui ^2.2.6

[layershifter]

This is expected behaviour and is part of the simple Dropdown idea.

[kschrader02]

The menu item is expected to stay open when clicked and even when the mouse is moved off of it?

[layershifter]

Yes. It's confusing, but the main idea of the simple Dropdown don't use JS, however it doesn't make any sence for SUIR.

https://semantic-ui.com/modules/dropdown.html#simple
https://react.semantic-ui.com/modules/dropdown#types-simple

I don't see diffences in these examples except the selection of an active item. Did I miss something?

[kschrader02]

Maybe it's just something wrong in my code? In the examples they at least close the dropdown menu after you click an item and move the cursor off. For me it just stays open when I mouse away and have to click to close it.

[Edgars7q]

Same here, its staying open after click on dropdown item. To close i need to press anywhere else except current dropdown but in given examples it closes after click. What could cause this issue ?

[w-A-L-L-e]

Same here making custom dropdown and also ran into this (dropdown stays open after clicking on item and indeed clicking anywhere else makes it close again). Normally the closeOnChange would be handy here but that also does not work. Only way seems to be manually setting the 'open' attrib with some state and then toggling that manually programmatically. Seems however the closeOnChange would be handy to have here as it would avoid boilerplate code for basically the default behaviour everyone wants (close the dropdown when you clicked it...).

[elibroftw]

item causes this to happen. I still don't know how to fix it. I've even tried avoiding simple and opening up the dropdown via css and :hover but the dropdown still stays open after clicking an item.

[elibroftw]

Solution:
Use CSS to open the dropdown menu on dropdown hover. You can also apply the active style doing this.

.ddClass:hover {
    /* active styles if any */
}

.ddClass:hover :global(.menu) {
    visibility: visible !important;
    display: block !important;
}

Then in your code do

<Dropdown .... item open={false} className={styles.ddClass} ... />

where ... are other props.

[brianespinosa]

Going to lock this issue. There is reference to the source of truth on this which is the Dropdown component in Semantic UI referenced above.