search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.99k stars 1.13k forks source link

[RAC] Tooltip on button in Table Cells break the hover state of actionable Row #6884

Open LaurentDario opened 2 months ago

LaurentDario commented 2 months ago

Provide a general summary of the issue here

When working with React Aria Table, we had the need to add tooltips in some of our cells to provide more informations (about the user details for example). This causes, in our design, to have Tooltip overlapping rows (so the tooltip of row 2 would overlap row 1 when opened). This means that the user could leave a Row without hovering it (Leaving row 2 while hovering the tooltip that is technically above Row 1) When this happens, the hover state of the row (using href) is not removed until a second pass of the mouse is done on it.

🤔 Expected Behavior?

Leaving a Tooltip that is in a row should trigger the HoverEnd event of that row.

😯 Current Behavior

Leaving a Tooltip that is in a row does not trigger the HoverEnd event of that row.

💁 Possible Solution

I tried using useHover and useFocus to help force it, but these hooks do not work on Row. For now we are forcing the Hover state to be closed when the Tooltip is closed, but that's not an ideal solution as it only works on custom properties that we use. I believe the problem comes from the Mouse events not properly triggering, or a ref missing between elements.

🔦 Context

No response

🖥️ Steps to Reproduce

To reproduce you just need a table with a Tooltip in one of the Cells and an hover state (in our case, done with the use of href)

Sandbox

rac-table-tooltip

Version

react-aria-components 1.3.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11 Enterprise

🧢 Your Company/Team

Workleap

🕷 Tracking Issue

No response

LFDanLu commented 2 months ago

This looks to be the same issue that was brought up in this following discussion: https://github.com/adobe/react-spectrum/discussions/4743. I must have forgotten to convert that discussion to an actual issue so thank you for reporting this. The comment I made here is still relevant, we will need to figure out a way to determine if a event that crosses portal boundaries is desired or not.