onMouseEnter propagation in double reactroot

[dsvgit]

I think it is bug

Now onMouseEnter event handler calls in child element when there are several reactroots.

To reproduce - run fiddle and move mouse from white square to red and back. In console you can see log when you do it. Link - https://jsfiddle.net/47sn3j5c/ . It works wrong.

Expected behavior: handler has to call just when mouse enter to red square. See here simiar example but with one reactroot - https://jsfiddle.net/bs3rc2wp/1/ . It works right.

React 15.1.0

[karczk]

Mutating DOM in react components is not allowed, you should render Hello component as child.
https://jsfiddle.net/47sn3j5c/1/

[dsvgit]

@karczk This isn't our case, because our application partially uses react and marionette (We migrate to react). So, root layout is rendered by react (App component), next some stuff is rendered by marionette and then marionette renders react component (Hello component). Because of this we have case like in this example - https://jsfiddle.net/47sn3j5c/ .

[hpurmann]

This is exactly the problem we are facing as well. We are migrating a big app to react. To be able to use react-router, we use a root component for the page and render other DOM as well as other reactroots inside.

As a workaround, we will compare event.target inside the event handler but it would still be interesting if that behaviour is considered a bug from the react devs.

[solomon-gumball]

We have the same thing going on where we are converting to React from Backbone and have some nested contexts.

I noticed the issue when adding onMouseEnter handlers to rect elements. The onMouseEnter event is triggered twice when "entering" the element from the react context.

https://jsfiddle.net/gss39gg6/

(Notice onMouseEnter fires correctly fires once when entering the pink rectangle from above).
Using react 15.3.0

@karczk

[conartist6]

I had a changeset to fix this, but it has become stale and I never got buy in on the correctness of the fix.

[sergeyisakov]

I have the same problem when I render components in DOM nodes in content editable component

[gaearon]

@conartist6 Where can we find it? I don’t see pull requests from your username.

[conartist6]

@gaearon

Here it is: conartist6@c926378

Very stale, but it worked totally correctly. Unfortunately all I ever heard about it was pushback that it seemed like a simpler solution should be possible. I reexamined my work several times to see if other solutions were feasible, and repeatedly came to the conclusion that they were not. I'm happy to talk about why code that follows this general pattern is necessary.

It also came in conflict with a longstanding request from the Nuclide team regarding event bubbling when the nested roots are not necessarily the same version of React. I haven't looked to see what the resolution to that issue was, if any.

[jquense]

I believe that we should get a fix here for free if we switch to native events vs the polyfill we have now...provided event bubbling isn't wonky across roots normally?

[conartist6]

@jquense Could you clarify? The reason this is polyfilled is not lack of support for the native events, it's that the mouseenter and mouseleave events do not bubble, per the specification.

[jquense]

@conartist6 that's not quite right, the polyfill mimics the native mousenter/mouseleave event behavior and doesn't bubble either. The polyfill was for ie8 and older chrome versions which aren't supported anymore

[conartist6]

@jquense So you're saying that instead of using event delegation for mouseenter and mouseleave we should just register native handlers on the underlying native elements. I don't recall what would need to be done to make that approach play nice with the rest of the event system.

But I don't understand why you are wondering if event bubbling is or isn't wonky across roots normally. If there's no bubbling involved, why does it matter?

[jquense]

sorry for being unclear. What i'm suggesting is that instead of having react polyfill these events we should rely on the native events, that would remove a lot of Very Special code that exists solely to implement these events. "Bubbling" was a poor choice of words, i meant react tree traversal required to implement the polyfill React uses. My hunch is that if we avoid that and lean on the native events (like we do for most DOM events) this bug will just go away. Of course it may not :P