onMouseLeave can be unreliable in Chrome

[petehunt]

See this jsfiddle: https://jsfiddle.net/tvxderw3/

In Chrome, as you quickly move your mouse up and down the list, you'll notice that some get stuck in the hover state. This works fine in Safari, and works in Chrome if you use a stable key between the hover states. I think mouseout somehow isn't firing if the underlying DOM node is replaced by a new one in the same tick, but it's odd that this is a Chrome-only bug.

[sophiebits]

Didn't you write React?

[sophiebits]

Best guess: the top-level onMouseOut doesn't fire on the removed node (which is basically what you said, sorry).

[waldreiter]

@petehunt

This works fine in Safari

I see the bug in Safari as well, version 8.0.7. In Firefox it happens too, but not so often.

[syranide]

FYI this happens without React as well. https://jsfiddle.net/ahf3tay5/

[sophiebits]

Well that's just lovely. Time to file a Chrome bug?

[syranide]

@spicyj It's in IE too, perhaps this is actually a weird spec thing?

[pswai]

@syranide I have tried with pure JS and it works fine (tested in Mac Chrome) http://jsfiddle.net/2gmzzzv1/1/

[syranide]

@pswai You're testing a different scenario, my fiddle shows that this is not a problem with the React event system, it's a "problem" with browser behavior when the hovered nodes are replaced/removed.

[pswai]

@syranide Ah you are right. Thanks for pointing that out.

[pswai]

There seems to be bug reports about this for Chrome

https://code.google.com/p/chromium/issues/detail?id=276329
https://code.google.com/p/chromium/issues/detail?id=515921

[henriquezago]

I'm also having troubles with this event, tested on Chrome, Firefox (stable) and Edge. It only worked fine on Firefox nightly.

It fires the onMouseEnter just fine, but it almost never works for the onMouseLeave event. There is no way at all to use this Synthetic Event.

[gaearon]

@henlz Perhaps it's time to file a new issue with a reproducing example? This one is pretty stale, and it's hard to say if they're even related or not.

[henriquezago]

@gaearon You're right. I will create one with all the details and steps to reproduce it for a better discussion.

[gaearon]

I’ll close this one as it’s unlikely we’ll make meaningful progress on an issue from 2015.

[oyeanuj]

@henlz Is there an issue you created for this somewhere? Just ran into this as well :/

[WillSquire]

Is there a workaround for this?

[flackr]

I investigated this issue and it seems that Chrome and Edge not firing mouseleave on removed DOM nodes is correct according to the UI Events spec:

If the event target (e.g. the target element) is removed from the DOM during the mouse events sequence, the remaining events of the sequence MUST NOT be fired on that element.

I filed bugs on firefox and safari for this incorrect behavior.

[kevin-king]

Also just ran into this issue. Still investigating workarounds. Anyone find a workaround? Will post back if I find a good way to fix.

[DamianDobrev]

I managed to "fix" this. I'm doing two things:

1. Added the listener to element which is not display: inline;, rather block/inline-block.
2. Added pointer-events: none to any containers of SVGs inside the element with the listener.

Seems to work fine now, the event is fired properly. I do not know why though.

[KevinGrant12]

@DamianDobrev Thank you! What an odd problem. I have a button with child SVG's being animated and this was a 4 day headbanger that I finally tracked to here! It was simply a matter of disabling the pointer events on the child svg's.

[yardenapp]

I fixed this by invalidating the hover state between renders

// Inside your component
const divRef = useRef();
const [hovered, setHovered] = useState();
 
if(hovered && divRef.current && divRef.current.matches(':hover') === false)
    setHovered(false);

return (
    <div ref={divRef} onMouseEnter={()=>setHovered(true)} onMouseLeave={()=>setHovered(false)}/>
)

[cory-vade]

I managed to "fix" this. I'm doing two things:

1. Added the listener to element which is not display: inline;, rather block/inline-block.
2. Added pointer-events: none to any containers of SVGs inside the element with the listener.

Seems to work fine now, the event is fired properly. I do not know why though.

Does anyone actually understand the root cause of this?

[AKclown]

I managed to "fix" this. I'm doing two things:

1. Added the listener to element which is not display: inline;, rather block/inline-block.
2. Added pointer-events: none to any containers of SVGs inside the element with the listener.

Seems to work fine now, the event is fired properly. I do not know why though.

Thanks a lot, this is very helpful for me

[danny-dang]

I fixed this by invalidating the hover state between renders

// Inside your component
const divRef = useRef();
const [hovered, setHovered] = useState();
 
if(hovered && divRef.current && divRef.current.matches(':hover') === false)
    setHovered(false);

return (
    <div ref={divRef} onMouseEnter={()=>setHovered(true)} onMouseLeave={()=>setHovered(false)}/>
)

Thank you. This solution works like a champ

[sun-rhythms]

Referen

Helped me! Thanks!