Changing state in onFocus and onChange for a select multiple element does not work in Firefox

[skleeschulte]

I want to use a controlled <select multiple={true} /> component in React. In addition to the value I also want to keep the focused state of the select in the state. To do this, I update the state with setState in the onChange, onFocus and onBlur event handlers. Unfortunately there is an issue in Firefox: Firefox will only update the value on a change event after the select has gained focus. This means that a user has to click twice on the select element to change its value when it does not have focus. I would expect the select to gain focus and change the value at the same click.

I created a jsFiddle to demonstrate the prolem: React select multiple issue in Firefox demonstration

I only see this problem in Firefox and with select multiple. In IE and Chrome it is working as expected, and in Firefox it is working as expected for other form elements (simple select, checkbox, radio, text input, textarea).

My environment:

• Firefox 46.0.1 under Win7 x64
• React 15.1.0

[jimfb]

I can confirm that I see the same, apparently buggy, behavior.

This only happens if we setState on onFocus, which leads me to suspect that ReactDOMSelect.updateOptions is getting triggered during reconciliation, and updateOptions is setting the selected property on the option(s) prior to onChange firing, which is confusing Firefox.

[skleeschulte]

So is there any workaround I could use? Or can react be changed to resolve the issue? Or should I open a bug report for Firefox? Not sure where to go from here...

[swpdsgn]

Heyo!
https://jsfiddle.net/swpdsgn/01krfjyd/
A workaround basically, I just removed the onFocus for the multiple select box, and put the state change within the onChange event. The focus now occurs at the same time as the selection of the option.

I think I actually came across some similar issues with other frameworks when dealing with multiple select boxes in Ffox. My guess is that in Ffox one triggering event stops the propagation thru to the other and therefore requires the double time click, probably cause the select box has actual children in all the options in it.

[skleeschulte]

@swpdsgn Thank you, but for me this workaround is not working well. E.g. select a line, then click somewhere else for the multiselect to loose focus, then click that already selected line again. The multiselect will receive focus again, but that will not be represented by the state.

[swpdsgn]

@skleeschulte sry about the error. That state doesn't change if you click on the same option selected, which is to be expected cause the value didn't change. For the other selectable options works ok. Now I've added an additional onClick to set the focus back if the selected option is clicked again. Check it now.
https://jsfiddle.net/swpdsgn/01krfjyd/

[skleeschulte]

@swpdsgn Ok, this is getting closer, but is still not working as it should: at least on Windows, the focus is normally already set on mouse-down - not only after a "full" click.

[gaearon]

Can somebody confirm if it still happens in React 16?

[nhunzaker]

As far as I can test, using this new jsfiddle for React 16.4.1, this is still an issue:
https://jsfiddle.net/639ksype/

[eps1lon]

Still reproduces with React 17 (and some experimental feature flags): #20810 (comment)