Expose alternative `InputBlur`-like event for use with `useMultipleSelection`

[bnjmnt4n]

• downshift version: v6

Feature request:

downshift attaches event listeners to the document to trigger the InputBlur event when the the user clicks outside of the downshift menu element when the menu is open. I'd like to request a similar event to be triggered for use with useMultipleSelection.

Here's my usecase: I have a multiple selection with different styles for the currently active selected item. I'd like to be able to reset this when the user clicks outside the menu, so anytime the user clicks outside of the menu elements I'd call something like setActiveIndex(-1). The InputBlur event does not trigger in this case as the menu is not open, so I'm unable to call setActiveIndex(-1) during InputBlur. I feel that this is a common enough use case that this could be integrated within useMultipleSelection.

[silviuaavram]

Hi! InputBlur is triggered when you blur on the combobox/select, it's not related to the selected items from useMultipleSelection. Probably you have this in mind as well.

What you want is SelectedItemBlur that triggers when you blur from the selected item, but only on Tab / click/tap outside??

[bnjmnt4n]

What you want is SelectedItemBlur that triggers when you blur from the selected item, but only on Tab / click/tap outside?

Yes, this would be exactly what I'm asking for. Perhaps some code that checks if activeIndex !== -1 and resets it to -1 when the user clicks outside of the active items.

[silviuaavram]

Actually I don't think this should be done. The reasons is that we should keep tabindex=0 on the active item for you to be able to return to it via Tab.

[bnjmnt4n]

I think this is a pretty common use case for multiselection components. For example, Gmail has this behaviour as well, where if you've selected an email and click elsewhere, it deactivates the selection. I agree that this might not be a good default for everyone, which is why adding an extra event like SelectedItemBlur can come in handy so users who do want to implement this behaviour can use a state reducer or event handler. Otherwise, it would be possible to implement this outside of downshift, but it would require duplicating a lot of the work that could already be done by downshift (which keeps track of the element refs and also has utilities in place for handling clicks outside of the elements).