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 strange behaver when has disabled child element #10396

Closed
zombieJ opened this Issue Aug 7, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@zombieJ
Copy link
Contributor

zombieJ commented Aug 7, 2017

Bug report.

Here is the demo: https://jsfiddle.net/qz3fytwe/1/

When <div> contains an disabled button. React can trigger onMouseEnter correctly in div but onMouseLeave not trigger when mouse on the button and move down out of the div.

I tried 15.4.0 & 15.6.1 in Chrome has the issue. Not sure whether it appear before that.

@zombieJ

This comment has been minimized.

Copy link
Contributor

zombieJ commented Aug 9, 2017

hi @gaearon, could you pls take a look?

@jquense

This comment has been minimized.

Copy link
Collaborator

jquense commented Aug 9, 2017

Hi there, yes mouse events don't work on disabled elements generally, this is a browser implementation detail and not something easily addressable (if at all). There are already a few issues about these events and mouse events and some PRs attempting to make the behavior more consistent.

In all likelihood though, in the future react will defer to the behavior of the native events and their behavior which means they won't fire on disabled elements in some way.

@jquense jquense closed this Aug 9, 2017

@aweary

This comment has been minimized.

Copy link
Member

aweary commented Aug 9, 2017

@jquense in the example @zombieJ provided the leave and enter events are registered on the div containing the disabled button, not the button itself. In this case, I think it should be dispatching the leave event, since it dispatches an enter event and it works as expected with regular event listeners

@jquense

This comment has been minimized.

Copy link
Collaborator

jquense commented Aug 9, 2017

Yeah the enter/leave traversal logic is implemented in terms of from/to elements. So yeah, unlike the native event react will drop events in odd places, because one of the elements being moved to or from is disabled, and so it's pair can't be accurately calculated. In the fiddle, leave works if you exit right from the button then down. It's missing the other directions because the surrounding div has no dimension around the button and so isn't firing mouseover/mouseout events (and the button fires nothing)

I meant to close with some refs to the previous issues:

#10109
#4251

The various PRs I have up will at least bring the behavior in line with the native events:
#10247
#9824
#10269

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