adobe / adobe/react-spectrum

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

Open
#6,884 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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](https://codesandbox.io/p/sandbox/nostalgic-rumple-hvx43r?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzvevlk90006356hh20qjego%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzvevlk90002356h7qdj23fz%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzvevlk90003356h184qya82%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzvevlk90005356he9qxcj2s%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzvevlk90002356h7qdj23fz%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzvevlk90001356hqqoc7p62%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clzvewm2m003g356hhuq3df0g%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A2%252C%2522startColumn%2522%253A10%252C%2522endLineNumber%2522%253A2%252C%2522endColumn%2522%253A16%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clzvevlk90002356h7qdj23fz%2522%252C%2522activeTabId%2522%253A%2522clzvewm2m003g356hhuq3df0g%2522%257D%252C%2522clzvevlk90005356he9qxcj2s%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzvevlk90004356hzaetfjnk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clzvevlk90005356he9qxcj2s%2522%252C%2522activeTabId%2522%253A%2522clzvevlk90004356hzaetfjnk%2522%257D%252C%2522clzvevlk90003356h184qya82%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clzvevlk90003356h184qya82%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

![rac-table-tooltip](https://github.com/user-attachments/assets/6f92cc9c-5fba-40e2-807c-3b85bfce453b)

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.