search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.58k stars 46.42k forks source link

Consider removing mouseenter/mouseleave polyfill #11972

Open gaearon opened 6 years ago

gaearon commented 6 years ago

As suggested in https://github.com/facebook/react/pull/10247. Not sure we want to do it, but I decided to create an issue to track future attempts (the PR is stale).

gaearon commented 6 years ago

Also related: https://github.com/facebook/react/pull/10269

jquense commented 6 years ago

The main difficulty with removing the polyfill is the portal support. Unlike all other events, it doesn't fall out naturally from the synthetic event system. #10269 has (i think) the minimum basic code to add portal support back in. The question is whether it's better than the current polyfill /shrug

aldendaniels commented 6 years ago

I was pleasantly surprised that React correctly avoids firing onMouseEnter / onMouseLeave events on ancestors when moving the mouse between a portal host and its content - simulating non-portal behavior. Nice!

~It looks like React doesn't have this same fix for focus/blur, but I think it ideally would. It's quite useful to be able to treat portals exactly like any other child, which means that a focusOut event caused by moving focus into a portal wouldn't bubble to portal ancestors.~

~I think the full list of events that need special handling might be all those that have a relatedTarget - e.g these.~

Update: I think this latter bit isn't true, since React always uses onFocusIn/onFocusOut under the hood which do bubble to parents. Perhaps onMouseEnter / onMouseLeave are the only case... There are also pointer and drag events to consider.

harrisonlo commented 3 years ago

Just wanted to chime in here to express the need for the native onmouseleave event. React's onMouseLeave currently maps to the native onmouseout event, which behaves differently when hovering through a child element in portal. Something like https://github.com/facebook/react/pull/10269 seems to solve the problem. I ended up having to access the native onmouseleave via a ref, but that's not ideal.