<p dir="auto">Since upgrading to React 15.0.1, when rendering <code class="notranslate">&lt;select&gt;</code> with optgroups, the value is not set on the DOM correctly. The first option will always get picked.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Renders with &quot;Yes&quot; selected, I expect &quot;Maybe&quot;
  &lt;select value={3}&gt;
    &lt;optgroup label=&quot;One&quot;&gt;
    &lt;option value={1}&gt;Yes&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label=&quot;Two&quot;&gt;
    &lt;option value={2}&gt;No&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label=&quot;Three&quot;&gt;
    &lt;option value={3}&gt;Maybe&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;"><pre class="notranslate"><span class="pl-c">// Renders with "Yes" selected, I expect "Maybe"</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">select</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">3</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">optgroup</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"One"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">option</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Yes<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">option</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">optgroup</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">optgroup</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Two"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">option</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">2</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>No<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">option</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">optgroup</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">optgroup</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Three"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">option</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">3</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Maybe<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">option</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">optgroup</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">select</span><span class="pl-c1">&gt;</span></pre></div>
<h2 dir="auto">Examples</h2>
<p dir="auto"><a href="http://jsbin.com/madesikinu/3/edit?html,js,output" rel="nofollow">React 15.0.1 Fiddle (broken)</a><br>
<a href="http://jsbin.com/zofayocijo/1/edit?html,js,output" rel="nofollow">React 0.14.7 Fiddle (works)</a><br>
<a href="http://jsbin.com/madesikinu/5/edit?html,js,output" rel="nofollow">React 15.0.1 without optgroup Fiddle (works)</a></p>
<h2 dir="auto">Environment</h2>
<p dir="auto">OS X 10.11.4<br>
Safari Version 9.1 (11601.5.17.1)<br>
Chrome Version 49.0.2623.110 (64-bit)<br>
Firefox 45.0.1</p>
<p dir="auto"><em>Edit: I also noticed that the same behavior occurs when using <code class="notranslate">defaultValue</code>.</em></p>
<p dir="auto">Using React 15.0.1, controlled select elements with optgroup elements are not displaying (selecting) the value provided on initial render. See the following jsfiddle for a simple test case:</p>
<p dir="auto"><a href="https://jsfiddle.net/Artconnoisseur/eg3j7fam/1/" rel="nofollow">https://jsfiddle.net/Artconnoisseur/eg3j7fam/1/</a></p>
<p dir="auto">Here is another fiddle where it is working using React 0.14.8:</p>
<p dir="auto"><a href="https://jsfiddle.net/Artconnoisseur/hfp8rf1j/1/" rel="nofollow">https://jsfiddle.net/Artconnoisseur/hfp8rf1j/1/</a></p>