Mouseenter event not triggered when cursor moves from disabled button

[stepancar]

BUG.

Mouseenter event not triggered when cursor moves from disabled button
see example

What is the expected behavior?
Should trigger Mouseenter event

React 15.5.3
Latest Chrome
MacOs 10.12.5

[Andarist]

I think its because mouseout event is not triggered for disabled form elements, according to https://developer.mozilla.org/en/docs/Web/Events/mouseout and React's synthetic mouseenter event works based on mouseout.

Aint sure if its possible to safely revert detection strategy to the mouseover (which would work), as there is probably some reason why its implemented like that.

[gaearon]

I’ll tag this as a bug, but not sure if it ever worked, or whether it’s possible to fix.

[Andarist]

What can be done about this temporary is to put smth like margin-left: 2px; on the disabled button. (1px doesnt seem to work).

[stepancar]

@gaearon could you check this PR?
Works good for this case

[aweary]

Verified this is still an issue in React 16: https://jsfiddle.net/ut5tqgbk/

[jquense]

Yes this is due to the way the polyfill is implemented and isn't really fixable with the current strategy since it relies on infering the paired event (enter/leave) from the relatedTarget of it's opposite. Just means that since disabled elements don't emit mouseout the entering element won't get a mouseenter

[zikaari]

This is really a big trouble. I tried to get around it by attaching onMouseEnter to li tag wrapping the disabled button. Exhibited same behavior nonetheless 😞

[gaearon]

@jquense Does the fix in #10149 make sense to you?

[Justin-ZS]

Same problem here😞.(react@16.3.2)