I'm using Tooltip from react-aria-components and useHover from react-aria
I'm facing a bug where when the Tooltip is displayed, useHover doesn't detect leave hover.
I made a CodeSandbox that reproduces the bug here: Link to CodeSandbox
Here is a video recording I uploaded on Google Drive that demonstrates the bug: https://drive.google.com/file/d/1oPMJapOR35YWfRCb9fkYZywZYw5_A_u-/view?usp=sharing
Observe that:
- The div is still detecting it is "Hovered" (displayed in blue) even after user's mouse has left the the div.
- This only happens if user triggers the tooltip before leaving the div.
- If user doesn't trigger the tooltip before leaving the div, the div will be shown in blue when hovered, and white when not hovered (which is correct).
- If user triggers the tooltip before leaving the div, the div will be shown in blue when hovered, and still blue when not hovered (which is incorrect)
How to fix this problem such that when Tooltip is open, leave hovering the element will be detected (that is the tooltip will be shown in white after user's mouse has left the div)?
Some more observations I found:
- This bug only happens when I use the Tooltip component
- If Tooltip component isn't open, this bug doesn't happen, leave hover is detected correctly
- This bug only happens when my mouse leaves the component from the top direction, if I leaves the component from bottom direction, the bug doesn't happen
A little context on what I'm intending to achieve here, I'm using useHover to check if user is hovering over the div, and if user is, I want to show the menu button. The menu button will need to have a tooltip that describes that it is a 'Menu'. When user leave the div, I want to hide the menu button, the problem is after user hovers over the menu button and triggering the tooltip, then leaves the div, the menu button will not disappear, because leave hover is not detected.