<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong> bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When React component is mounted as a descendent of DOM element which stops propagation of <code class="notranslate">change</code> event, <code class="notranslate">onChange</code> event of <code class="notranslate">&lt;select&gt;</code> in React component does not occur.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.</strong></p>
<p dir="auto">HTML structure</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- outer div's onchange event contains stopPropagation() --&gt;
&lt;div&gt;
  &lt;div id=&quot;react-root&quot;&gt;&lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-c">&lt;!-- outer div's onchange event contains stopPropagation() --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">react-root</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">React Component (only <code class="notranslate">render()</code>)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="render() {
  return(
    &lt;select onChange={this.doesNotWork} value={this.state.value}&gt;
      &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
      &lt;option value=&quot;another&quot;&gt;another option&lt;/option&gt;
    &lt;/select&gt;
  );
}"><pre class="notranslate"><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span><span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">select</span> <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">doesNotWork</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">}</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-s">""</span><span class="pl-c1">&gt;</span><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-ent">option</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"another"</span><span class="pl-c1">&gt;</span>another option<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">select</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><a href="https://codepen.io/jkr2255/pen/dqyLqm" rel="nofollow">Reproduction in CodePen</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><code class="notranslate">&lt;select onChange&gt;</code> works well just like <code class="notranslate">&lt;input&gt;</code> or <code class="notranslate">&lt;textarea&gt;</code></p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">This issue occurred with React 16.4.2 (not tested for older React), newest Chrome, Firefox, Edge, IE11 on Windows 10.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/nathansobo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/nathansobo">@nathansobo</a> will that help your event perf issues a bit? I'm not familiar with atom's plugin infrastructure, But this'll help if you have <code class="notranslate">&lt;Editor/&gt;&lt;Plugin1/&gt;</code> (two <code class="notranslate">renderComponent</code>s). Doesn't help if you have <code class="notranslate">&lt;Editor&gt;&lt;Plugin1/&gt;&lt;/Editor&gt;</code> though, but I have some ideas to optimize events a bit more.</p>
<p dir="auto">This is nonetheless an ok idea, I think.<br>
<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/spicyj/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/spicyj">@spicyj</a></p>