<p dir="auto">There is an asymmetry to EnterLeave event plugin. Since <code class="notranslate">mouseenter</code> is created from the relativeTarget of the <code class="notranslate">mouseout</code> event it fires even though the target is disabled. Since the <code class="notranslate">mouseleave</code> is the inverse, i.e requires that the disabled element fire a mouseout, it doesn't fire a <code class="notranslate">mouseleave</code> for the disabled element.</p>
<p dir="auto">I am pretty sure the correct behavior here is that neither event should fire if its target is disabled, since this mirrors <code class="notranslate">mouseout</code>. No idea if none-chrome browsers have the same behavior for which mouse events fire on disabled elements.</p>
<p dir="auto">Additional caveat I just realized, React is probably also not firing <code class="notranslate">mousenter</code> events in the case where the mouse leaves a disabled element into a non disabled element</p>
<p dir="auto">I'm experiencing an unexpected error related to "native" DOM events created in an "owner" component and triggered by DOM elements rendered by "owned" components.  There's been a number of seemingly related issues, the closest being <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="72111434" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/3790" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/3790/hovercard" href="https://github.com/facebook/react/issues/3790">#3790</a> - but this might be a different edge case so I thought I'd create a new issue for it.</p>
<h3 dir="auto">Reproduction</h3>
<p dir="auto">I've tried to whittle this down as much as possible:<br>
(The JSFiddle is using 0.13.3, but I get the same error using 0.14.0-beta1)<br>
<a href="https://jsfiddle.net/dmininger/8rdqhnox/" rel="nofollow">https://jsfiddle.net/dmininger/8rdqhnox/</a></p>
<h4 dir="auto">Steps</h4>
<ol dir="auto">
<li>Click "Go to Two"</li>
<li>Click "Go to One"</li>
<li>Click "Go to Two"</li>
</ol>
<p dir="auto">The second time component <code class="notranslate">Two</code> is rendered React throws <code class="notranslate">Invariant Violation: ReactMount: Two valid but unequal nodes with the same </code>data-reactid``</p>
<h4 dir="auto">Notes</h4>
<p dir="auto">As I was trying to narrow down the cause, I found that under the following scenarios <strong>no</strong> error will be thrown:</p>
<ol dir="auto">
<li>An onClick prop with an empty function (<code class="notranslate">onClick: function(){}</code>) is added to the "a" element in component <code class="notranslate">One</code>. See <a href="https://jsfiddle.net/dmininger/kx98qfd2/" rel="nofollow">https://jsfiddle.net/dmininger/kx98qfd2/</a></li>
<li>The "input" element in component <code class="notranslate">Two</code> is removed (leaving the "form" element). See <a href="https://jsfiddle.net/dmininger/snjb8ysq/" rel="nofollow">https://jsfiddle.net/dmininger/snjb8ysq/</a></li>
<li>The return value of the render methods of components <code class="notranslate">One</code> and <code class="notranslate">Two</code> are inlined in the render method of the <code class="notranslate">Main</code> component  (i.e. everything is rendered by a single component). See <a href="https://jsfiddle.net/dmininger/3majxxL0/" rel="nofollow">https://jsfiddle.net/dmininger/3majxxL0/</a></li>
<li>ONLY WHEN USING 0.14.0-beta1: The "form" element in component <code class="notranslate">Two</code> is removed (leaving the "input" element). (Sorry, no fiddle, is 0.14.0-beta1 on a CDN?) This still throws in 0.13.3.</li>
</ol>
<p dir="auto">Thanks!</p>