onBlur has inconsistent behavior.

[lmotioc]

Describe the bug
On Blur doesn't get triggered on focus out.
When a selected option is removed with the 'x'button onBlur isn't triggered, but when it is removed from the dropdown, on blur is triggered.

To Reproduce
CodeSandbox here with a console.log attached to onBlur.

• focus in and focus out the select, on blur doesn't get triggered. (navigating with tab)
• remove a selected option from the control (using the x button) on blur doesn't get triggered, but when you uncheck a selected option, onBlur gets triggered.

Expected behavior
onBlur to be triggered on focus out.
onBlur to be triggered when removing a component with the x button

Environment (please complete the following information):

• Browser [e.g. chrome v84, firefox v78]

[mrchief]

I'm a little blurry on the onBlur 😄

I remember adding those in order for the component to work with forms like Formik or redux-forms. The idea was that onBlur would be fired when user clicks anywhere outside of the component. This would be consistent with native web controls.

onBlur to be triggered when removing a component with the x button

This should not trigger onBlur because the user can still be inside the component (especially in case of multiselect). Happy to be hear your thoughts.

[lmotioc]

The idea was that onBlur would be fired when user clicks anywhere outside of the component.

I agree. And I also need the onBlur for validation.

However, it dos not get triggered when you click outside. It gets triggered when you close the dropdown, it don't make any difference if the select is still focused or not. In case the select is still focused (e.g. for removing some of the selected items) when you actually leave the whole input, the onBlur does not get triggered.

[mrchief]

However, it dos not get triggered when you click outside. It gets triggered when you close the dropdown

Clicking outside should close the dropdown. Are you able to reproduce this in the CodeSandbox?

[lmotioc]

yep, but there is this case:

• Initial state: select component has some values selected, the dropdown in closed, the component is out of focus.
• step 1: user removes one of the selected items from the component. Component should now be on focus. the drop-down does not get triggered.
• step 2: user clicks somewhere outside the component. component loses focus.
  Outcome: onBlur doesn't get triggered.
  Expected: onBlur gets triggered (i need the onBlur to trigger for the form to be re-validated)

So what i am trying to say is that the component can be on focus -off focus even if the dropdown is not triggered. does it make sense?

[mrchief]

Yes, I agree with you that that should be the case.

[lmotioc]

is it ok if i'll try to fix this? i'm not to sure what's the workflow here. 😄

[mrchief]

@lmotioc yes, have a go at it!

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.