[question] MultiSelect onBlur behavior
- Dominant language
- JavaScript
- Stars
- 51
- Forks
- 13
- PR merge metrics
- No merged PRs in 30d
Description
## Expected Behavior
When utilizing the `onBlur` prop for the MultiSelect component, I expect the passed-in `onBlur` function to be called when the select menu collapses due to a click outside of the component.
This is particularly important when `closeOnSelect = {false}`. Consider a situation where the user makes multiple selections after opening up the select menu, but you do not want those selections to be processed or submitted until the user clicks away from the select menu, collapsing it.
## Current Behavior
From what I could tell, when `closeOnSelect = {false}` the `onBlur` effectively acts like another `onChange`, only being triggered when a selection is made, because the click triggers a focus and then immediate loss of focus on one of the individual menu items. There does not appear to be a prop that could handle a blur on the entire select menu.
## Possible Solution
Is there a way to handle this type of blur, or is the use case too fringe to bother baking it into the component? Perhaps an `onMenuBlur` prop?
## Steps to Reproduce (for bugs)
1. Create multiselect component with multiple menu items
2. Set `closeOnSelect={false}`
3. Set `onBlur={someFunction}`
4. Observe when `someFunction` is called as you interact with - and click away from - the select menu
## Context + Screenshots
I had a situation where I needed to disable a table cell's selection property if a user clicks away from the select menu, but could not with the current props (as far as I am aware).
## Your Environment
* Version used: 0.56.0
* Browser Name and version: Chrome Version 88.0.4324.192 (Official Build) (x86_64)
* Operating System and version (desktop or mobile): macOS Catalina Version 10.15.7
* Link to your project:
Contributor guide
Assessment
This issue has not been assessed yet.