Bug: MouseEnter does not fire when coming _from_ disabled elements

[jquense]

React version: 16.13.1

Steps To Reproduce

https://codesandbox.io/s/eager-euler-c72fw?file=/src/App.js

1. move from a disabled element to an element with a mouseenter listener.
2. mouseenter does not fire

Link to code example: https://codesandbox.io/s/eager-euler-c72fw?file=/src/App.js

The current behavior

mouseenter does not fire because React calculates mouseenter/leave based on the relative element of the opposing event.
e.g. mouseenter calculated from the mouseout on the button. Browsers do not fire pointer events on disabled elements

The expected behavior

mouseenter should fire

Previous issue: #4251

[ibrahimjelliti]

@jquense if I comment the SyntheticEvent onMouseEnter(L19).
Native enter is logged from the addEventListener mouseenter event

[jquense]

you don't need to comment it, the native one always fires. It's there to illustrate that React is not mimicking the native behavior correctly

[ramblinjan]

Currently investigating this (and hopefully fixing)

[ramblinjan]

Repro'd via a broken test:
master...ramblinjan:master

EDIT: Actually I have to fix the test. I had the sanity check and the test case backwards. Oops!
EDIT 2: Test is now correctly matched to issue. Moving on to fix.

[jquense]

FWIW there isn't any easy fix for this without changing all the mouse enter/leave event dispatching. I've already posted a few PRs that work around this a few ways but they are many years old at this point. Tbh the easiest fix would be to just use native mouse enter and leave

[ramblinjan]

@jquense I think the problem is that would require attaching a native event listener 1:1 for each synthetic event which is potentially a huge performance hit when you can take advantage of event delegation instead. I think I might have a reasonable fix for this.

[tulsidaskhatri]

mouseenter event is not triggered on a native button when it is disabled. Here is an example:

https://jsfiddle.net/x9ofu5e1/7/

This example includes click and mouseout events as well.

mouseenter is working as per expectation in react as well, it is not triggered when button is disabled.

[dev-nicolaos]

FWIW, the above fiddle does trigger the mouseout and mouseenter events on the disabled button in Firefox 87.0, so it appears there is some disparity between browsers.