Skip to content
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 · 6 comments
Closed

onMouseLeave strange behaver when has disabled child element #10396

zombieJ opened this issue Aug 7, 2017 · 6 comments

Comments

@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
Copy link
Contributor Author

zombieJ commented Aug 9, 2017

hi @gaearon, could you pls take a look?

@jquense
Copy link
Contributor

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 as completed Aug 9, 2017
@aweary
Copy link
Contributor

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
Copy link
Contributor

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

@Jony-Y
Copy link

Jony-Y commented Mar 19, 2019

@jquense seems like this will only be solved in 17.0.0 according to #11972

Is there some w/a for now for us to use?
EDIT
Mutated my HOC to use native event listeners with ref as a w/a

@RNachmanyAnyVision
Copy link

This issue still open.
We create native event listener (with ref) to avoid the problem.

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

No branches or pull requests

5 participants