New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`onMouseLeave` can be unreliable in Chrome #4492

Closed
petehunt opened this Issue Jul 26, 2015 · 19 comments

Comments

Projects
None yet
@petehunt
Copy link
Contributor

petehunt commented Jul 26, 2015

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

This comment has been minimized.

Copy link
Collaborator

sophiebits commented Jul 26, 2015

Didn't you write React?

@sophiebits

This comment has been minimized.

Copy link
Collaborator

sophiebits commented Jul 26, 2015

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

@cody

This comment has been minimized.

Copy link
Contributor

cody commented Jul 26, 2015

@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

This comment has been minimized.

Copy link
Contributor

syranide commented Jul 27, 2015

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

@sophiebits

This comment has been minimized.

Copy link
Collaborator

sophiebits commented Jul 29, 2015

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

@syranide

This comment has been minimized.

Copy link
Contributor

syranide commented Jul 29, 2015

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

@pswai

This comment has been minimized.

Copy link

pswai commented Oct 3, 2015

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

@syranide

This comment has been minimized.

Copy link
Contributor

syranide commented Oct 3, 2015

@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

This comment has been minimized.

Copy link

pswai commented Oct 3, 2015

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

@pswai

This comment has been minimized.

Copy link

pswai commented Oct 3, 2015

@henlz

This comment has been minimized.

Copy link

henlz commented Aug 22, 2017

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

This comment has been minimized.

Copy link
Member

gaearon commented Oct 3, 2017

@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.

@henlz

This comment has been minimized.

Copy link

henlz commented Oct 3, 2017

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

@gaearon

This comment has been minimized.

Copy link
Member

gaearon commented Oct 3, 2017

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

@gaearon gaearon closed this Oct 3, 2017

@oyeanuj

This comment has been minimized.

Copy link

oyeanuj commented Apr 27, 2018

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

@WillSquire

This comment has been minimized.

Copy link

WillSquire commented May 17, 2018

Is there a workaround for this?

@flackr

This comment has been minimized.

Copy link

flackr commented May 30, 2018

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

This comment has been minimized.

Copy link

kevin-king commented Sep 7, 2018

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

This comment has been minimized.

Copy link

DamianDobrev commented Oct 2, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment