[MultiSelect] support closeOnSelect

[cloudysail]

Environment

• @blueprintjs/select@^3.3.0:
• Browser and OS versions:

Feature request

There is closeOnSelect props on suggest. Could we support it on MultiSelect too?

Examples

[adidahiya]

Not sure if that would be good UX... why would you want to close a multi select after only one interaction?

[cloudysail]

In my use case, it is a valid state after having one or more items been added to the multiSelect. But now users have to click somewhere else to close the multiSelect dropdown before working on something else. By having a closeOnSelect, we can save that one additional click which is quite helpful.

[adidahiya]

What if the user wants to select multiple items, since it is, in fact, a multi select dropdown? They have to endure an additional click to re-open the dropdown.

[cloudysail]

Right, then a configurable closeOnSelect could solve both of the requirements.

[adidahiya]

The idea still feels kind of unintuitive to me; are there any examples in the wild which use that UX? Most other UI kits I've seen keep the dropdown open, but it does look like react-select's multi select example closes the dropdown after one interaction.

Any thoughts @pkwi? Should we accept a PR to add this prop? Could you see a use for it in Palantir apps?

[cloudysail]

In our use case, selecting one or two items consumes 90% of the cases:

• For the one item selection, closeOnSelect===true could save on click than closeOnSelect===false
• For the two items selection, closeOnSelect===true has as many clicks as closeOnSelect===false
• Only for three or more items selection, closeOnSelect===true needs more clicks than closeOnSelect===false.

So I think it is valuable to have the option of configurable closeOnSelect.

[pkwi]

@adidahiya I doubt we will have a use for this internally. For us, it is important that items are selected/removed quickly from the list.

[alxmiron]

In my case, I make a validation after each MultiSelect change and error dialog conflicts with a dropdown (opening of a dialog doesn't trigger onInteraction inside MultiSelect's Popover, somehow). closeOnSelect would solve my problem

[nrathi]

+1 on the last comment, onInteraction isn't sufficient for third parties who want to support good UX for single selection use cases.

We have a Select component backed by BP's MultiSelect, but it accepts single or multiple selections. We want to be able to closeOnSelect in the single case, but there's no such prop. Furthermore, we can't control the popover state entirely because onInteraction doesn't account for the Esc key being pressed or the target being blurred, which causes issues for keyboard users.

[tokarskyibogdan]

use this inside your onItemSelect handler, and do not forget to add popoverRef

(document.activeElement as HTMLElement).blur();
popoverRef.current?.setState({ isOpen: false });