<p dir="auto">Repro: <a href="https://jsbin.com/gebasa/3/edit?js,output" rel="nofollow">https://jsbin.com/gebasa/3/edit?js,output</a></p>
<p dir="auto">Given:</p>
<div class="highlight highlight-text-xml notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;input 
  disabled={true}
  type=&quot;checkbox&quot;
  checked={trueOrFalse} 
  onChange={alert} 
  /&gt;"><pre class="notranslate">&lt;<span class="pl-ent">input</span> 
  <span class="pl-e">disabled</span>={true}
  <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>checkbox<span class="pl-pds">"</span></span>
  <span class="pl-e">checked</span>={trueOrFalse} 
  <span class="pl-e">onChange</span>={alert} 
  /&gt;</pre></div>
<p dir="auto">On at least IE11 a double click on checkbox causes onChange to be called. If it's just adding an if statement, normalizing this would be nice. It may also affect other elements/events like <code class="notranslate">&lt;button disabled onClick={f}&gt;</code>, misc screen readers, etc.</p>
<p dir="auto">Workaround: duplicate the disabled boolean logic in the handler.</p>
<p dir="auto">The report was from <strong>sim1234</strong> on IRC and verified by <strong>phi0x</strong>.</p>
<p dir="auto">Hi. I have a simple component like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var MyImage = React.createClass({
    render: function() {
        return &lt;img src=&quot;aaa.jpg&quot; /&gt;;
    }
});"><pre class="notranslate"><code class="notranslate">var MyImage = React.createClass({
    render: function() {
        return &lt;img src="aaa.jpg" /&gt;;
    }
});
</code></pre></div>
<p dir="auto">When I debug it using React dev tools to inspect the React DOM, that's what I see:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3027415/5999651/2d63e6c8-aad4-11e4-8f07-af44aefffd13.png"><img src="https://cloud.githubusercontent.com/assets/3027415/5999651/2d63e6c8-aad4-11e4-8f07-af44aefffd13.png" alt="screenshot 2015-02-02 12 08 12" style="max-width: 100%;"></a></p>
<p dir="auto">This breaks my unit tests, which expect just one <code class="notranslate">&lt;img&gt;</code> element. (I use <code class="notranslate">TestUtils.findRenderedComponentWithType(myImage, 'img');</code>)</p>
<p dir="auto">This is an issue only with the virtual DOM, browser DOM looks like expected:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3027415/5999729/0414ce80-aad5-11e4-89f4-e652710da9a8.png"><img src="https://cloud.githubusercontent.com/assets/3027415/5999729/0414ce80-aad5-11e4-89f4-e652710da9a8.png" alt="screenshot 2015-02-02 12 13 52" style="max-width: 100%;"></a></p>
<p dir="auto">Interesting note: When I change the line in <code class="notranslate">render()</code> to <code class="notranslate">return &lt;img src="aaa.jpg"&gt;aaa&lt;/img&gt;;</code> the element isn't duplicated anymore:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3027415/5999688/8bf6289a-aad4-11e4-82fc-7b9854a4e06c.png"><img src="https://cloud.githubusercontent.com/assets/3027415/5999688/8bf6289a-aad4-11e4-82fc-7b9854a4e06c.png" alt="screenshot 2015-02-02 12 10 52" style="max-width: 100%;"></a></p>
<p dir="auto">I'm using React <code class="notranslate">0.12.2</code>.</p>