feat(Dropdown): add closeOnChange prop

[apiv]

Steps

1. With a single-selection dropdown, select an item. The menu closes on select.
   
2. With a multi-selection dropdown, the menu always stays open.
   

Proposed changes

There are use cases for both menu open/close behaviors, but in some cases, I may want to close the dropdown on select. I'm proposing that we add a closeOnChange or closeOnSelect option to Dropdown, defaulting to true for single selects and false for multi-selects.

Version

v0.64.4

Testcase

http://react.semantic-ui.com/modules/dropdown#search-selection
http://react.semantic-ui.com/modules/dropdown#multiple-search-selection

I'm willing to submit a PR for this if we decide this option is worth adding to Dropdown.

[levithomason]

I'm all for this change. Let's go with closeOnChange.

I'd think this would only close on changes invoked by user interaction, such as, click and enter. This way programmatic updates don't usurp user control. Thoughts?

[apiv]

I think that fits the pattern, since changing value does not trigger onChange, only user interaction does. I'll submit a pull request shortly.

[levithomason]

@apiv Heads up, if the PR description contained fixes #1244 it would auto close the issue. However, the string must be one of the supported string values. The actual PR included fulfills issue #1244 so the issue remained open after merge.

Fixed in #1244, thanks for the work!

[andrewleith]

I'm having some trouble with this. When I use a dropdown without closeOnChange, it automatically closes when I select an option, which is exactly what I want. When I add the simple prop to the dropdown (because I would like this menu to open on hover), it no longer closes when I select an option. Why would the simple prop even affect this behavior at all?

Adding closeOnChange kind of works: it closes the dropdown, but only after I make a second selection.

Any advice?

[levithomason]

Per the docs, the opening and closing are done via CSS:

simple {bool} A simple dropdown can open without Javascript.

My guess is that you are probably getting some kind of conflicting behavior by having CSS and JS attempt to control the open state. I would instead move to a controlled component pattern and toggle the open prop on onMouseEnter and onMouseLeave.

If you post a codepen showing your issue, perhaps someone will give more details.

[andrewleith]

Here is a pen showing the issue:
https://codepen.io/andrewleith/full/WEwpRb

The first menu uses the simple prop, and it takes 2 clicks to have the menu close upon selection. The second menu closes fine on the first click (after opening the sub-menu by clicking it).

I'm just going to get rid of the simple prop in my case :)

[levithomason]

Oh I see, nested Dropdowns are not supported either.

https://react.semantic-ui.com/modules/dropdown#dropdown-example-menu-direction
https://react.semantic-ui.com/modules/dropdown#dropdown-example-pointing