Bug: different handling of onMouseEnter & onMouseLeave based on pointerEvents in Chrome

[layershifter]

React: 16.13.1
React-DOM: 16.13.1

Chrome 84.0.4147.135.
MS Edge 84.0.522.63.

---

This looks somehow related to #4251.

Steps To Reproduce

1. Open a CodeSandbox, https://codesandbox.io/s/laughing-sound-ox5yz
2. Move your mouse from the "point 1" to "point 2". Move your mouse from the "point 2" to "point 1".

The current behavior

Notice in your console:

#disabled:mouseenter 

For the button #disabled-style with the same movement:

#disabled-style:mouseenter 
#disabled-style:mouseleave 

The difference is that #disabled-style has pointer-events: none.

The expected behavior

Both buttons should log the same output.

It works?

• for the native DOM (https://codesandbox.io/s/recursing-leftpad-y5xbb)
• in IE11, Edge Dev 86, Firefox 79/80

[dzearing]

Related: it seems that onMouseLeave in React is actually mapping to the native mouseout event. Which itself seems to have inconsistencies in browsers.

[dandclark]

Suspected root cause is: https://crbug.com/1121675.

Although I don't know why some folks do not repro in Edge Dev 86. For me the issue repros there as well.

[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!

[layershifter]

Does not repro anymore in latest Chrome.