<p dir="auto">React version: 17.0.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Open codesandbox with Mozilla Firefox</li>
<li>Select a user from users list</li>
<li>The value is not selected on first time, need to click second time on list to get event.target.value</li>
</ol>

<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/stupefied-newton-lz134" rel="nofollow">https://codesandbox.io/s/stupefied-newton-lz134</a></p>

<h2 dir="auto">The current behavior</h2>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">I want to use a controlled <code class="notranslate">&lt;select multiple={true} /&gt;</code> 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 <code class="notranslate">setState</code> in the <code class="notranslate">onChange</code>, <code class="notranslate">onFocus</code> and <code class="notranslate">onBlur</code> 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.</p>
<p dir="auto">I created a jsFiddle to demonstrate the prolem: <a href="https://jsfiddle.net/fugf1kw9/2/" rel="nofollow">React select multiple issue in Firefox demonstration</a></p>
<p dir="auto">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).</p>
<p dir="auto">My environment:</p>
<ul dir="auto">
<li>Firefox 46.0.1 under Win7 x64</li>
<li>React 15.1.0</li>
</ul>