`useHover` without safePolygon is missing `mouseEnter` / `mouseLeave`
KutnerUri opened this issue · comments
When leaving anchor through the popper (without safePolygon!), the MouseLeave and MouseEnter events are missing.
The bug is worse with useTransitionStyles()
, but also happens without it.
- Something is blocking the events, but I don't see any
stopPropogation
orpreventDefault
. - Has to do with the parent having the
onMouseEnter
To Reproduce
https://codesandbox.io/p/sandbox/floating-ui-react-dom-template-forked-3x67t8?file=%2Fsrc%2FApp.js
- Hover on "anchor 1"
- See "container 1" getting programatic hover
- move through "pop" to "some button"
- "container 1" still have "hover"
Expected behavior: Container 1 should get MouseLeave, and container 2 should get MouseEnter
Context:
- OS: Sonoma 14.2.1
- Browser: Chrome
- Version: 120
- floating-ui/react v0.26.8
Additional context
- I tried switching events, but
mouseOut
andmouseOver
were not reliable - I tried making my own
handleClose
function, but it didn't seem to have an effect. - I might be able to replace the programmitc hover with just :hover. If I could it will solve it for this case
Workaround: by removing the transition, and keeping a gap between the two containers, the popper disappears fast enough and the events manage to trigger.
This seems to be a browser issue, not related to Floating UI.
You can reproduce the same issue without using this library at all: https://codesandbox.io/p/sandbox/floating-ui-react-dom-template-forked-r3c4wn?file=%2Fsrc%2FApp.js%3A7%2C1
yes I can see it happening even with html event listeners (without React), thanks for looking into this.
Good to know it's not some stopPropogation.
Possible workarounds:
- replace js events with css
:hover
- Create a gap hover targets. Disable transition if necessary.
Things I didn't try:
- disable pointer events on popper