useHover doesn't detect leave hover when used with TooltipTrigger

[jhhom]

I'm using Tooltip from react-aria-components and useHover from react-aria

• Docs to React Aria - useHover
• Docs to React Aria Components - Tooltip

I'm facing a bug 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.

[LFDanLu]

This seems to be due to the changes made in this PR to fix this issue. In general, we wanted to prevent events that happen within Dialogs/other portalled overlays from affecting its ancestors due to event bubbling, hence the contains checks made in that PR.

Unfortunately, this affects the useHover applied to the parent div in your example. useHover's onPointerLeave will receive a e.target of the tooltip element when you move your pointer up past the tooltip and outside the div, resulting in this line resolving as false and hence hoverEnd doesn't get properly called.

Alternatively, another bug that happens is if you set the tooltips to be always visible via isOpen and you try hovering the div entering from the top going through the tooltip (https://codesandbox.io/s/react-aria-usehover-bug-demonstration-forked-8y46kn?file=/src/App.tsx). Note that the div doesn't receive the hover styles since onPointerEnter for the div actually triggers upon hovering the tooltip due to event bubbling and once again the e.currentTarget (div) doesn't contain the e.target (tooltip) hence hover start doesn't fire for the div. Behaviorally, this makes sense since we wouldn't want the parent div to switch to its hovered state if the tooltip is positioned in such a way that it falls outside of the div positionally. This is pretty tricky, will have to think on how best to handle these two scenarios but still block events that happen in a overlay from affecting its parents.

[rschoenbichler]

It seems like the same issue is surfacing when using useHover on a trigger element of an Overlay.
Based on @LFDanLu comment, this seems reasonable as the issue is located in the portaled overlay.