Bug: `onMouseEnter` triggered twice on target when there's space around it, and ReactDOM.createPortal is used to render something else

[benoitgrelard]

React version: 17

Steps To Reproduce

1. Hover the button
2. Note the double log produced

Link to code example: https://codesandbox.io/s/react-mouseenter-bug-uyswr?file=/src/App.js

The current behavior

The onMouseEnter is triggered twice.

The expected behavior

The onMouseEnter should be triggered only once.

---

A few more notes:

• I've tested on React 16.14 and it seems that bug only appeared in 17. (I can see it in the first ever 17 rc as well).
• It's specifically when something happens to be portalled on the page too (you'll see if you don't render in a portal, no issue)
• It is also linked to the fact there's space around the target that gets moused over. You'll notice that if you comment out the heading below for example and you mouse-enter coming from the bottom, the bug won't be there. But it will be at the top. Similarly if we you keep the headings rendered, but override their margins to be 0 such that there's no gap between the heading and the button, it won't happen either.

I'm conscious this is all really odd but I haven't been able to find out exactly what's happening here…

[benoitgrelard]

A few more things:

It seems perhaps Fragment has a role here too. If you update the previous sandbox and replace the fragment with a div the bug is gone.

However, I think there are other considerations too.
For example, this doesn't have the bug:

    <>
      <div>
        <button style={{ margin: 100 }} onMouseEnter={() => console.log('mouseEnter')}>button</button>
      </div>
      {ReactDOM.createPortal(<span>portalled</span>, document.body)}
    </>

but this does

    <>
      <div style={{ margin: 100 }}>
        <button onMouseEnter={() => console.log('mouseEnter')}>button</button>
      </div>
      {ReactDOM.createPortal(<span>portalled</span>, document.body)}
    </>

Note, it also seems depending on the situation it doesn't happen with all sides. For example the one just above, the bug will be there when your mouse enters from the left or the bottom, but not from the top or right. However, in the original sandbox in the issue above, it's all sides (expect left as it's flush and no space).

[benoitgrelard]

Perhaps related to this? #19571

[Ntrigued]

I can take a look at this.

As a first step, I wasn't 100% clear what changes @benoitgrelard intended to change the example he provided into one without the bug, so I created a slightly more clear to me fork: https://codesandbox.io/s/react-mouseenter-bug-forked-40cfd?file=/src/App.js

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[benoitgrelard]

This issue is still relevant, as it still affects React 17 as well as React 18.

[benoitgrelard]

https://codesandbox.io/s/react-mouseenter-bug-forked-40cfd?file=/src/App.js

@Ntrigued that's not really correct as you can see with your example, both buttons double log on mouseover.

That's why I had structured the example like I did, if you comment in/out the span to either be portaled or not, then you can observe that the button (never portaled) is affected when the span is portaled.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[gynekolog]

bump

code example with the latest react (18.2.0)
https://codesandbox.io/p/sandbox/react-mouseenter-bug-forked-h9j3kd

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!