Tooltip in Table closes automatically for keyboard users
- 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
Tooltips within a Table component gets automatically closed immediately for keyboard users when moving focus back into the grid via Shift+Tab and in certain cases when navigating between cells.
### 🤔 Expected Behavior?
Tooltips should stay open when the trigger is focused
### 😯 Current Behavior
Tooltip is opened and then immediately closes again.
I think this is caused by scroll events. The Tooltip automatically closes on scroll (in `useOverlayPosition`) which is correct for regular scroll events. Tabbing back into the grid also results in scroll events (because the browser initially moves focus to the last focusable element which scrolls, then RAC moves focus and restores the scroll position), but they should be ignored somehow.
### 💁 Possible Solution
_No response_
### 🔦 Context
We're building our own Table component (because of different requirements) but plan to use the Tooltip component to show truncated content (for keyboard + mouse users, not needed for SR users and touch users can still resize the column / open the detail page). I stumbled across this problem in our own implementation but it's reproducible with the RAC table component.
### 🖥️ Steps to Reproduce
Open https://stackblitz.com/edit/goy7bobs?file=index.html (and make sure the preview window is wide enough so you can see the columns in the table)
Issue 1:
1. Tab into the grid and move focus to the "..." menu button => Tooltip appears
2. Press Tab (moves focus out if grid)
3. Press Shift + Tab (moves focus back into grid)
Issue 2:
1. Tab into the grid and move focus to the "..." menu button => Tooltip appears
2. Press Arrow Down multiple times until new rows appear in the viewport
### Version
react-aria-components@1.19.0
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
Windows 11
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and inspect Tooltip's useOverlayPosition behavior alongside the Table focus path. Compare Shift+Tab re-entry with Arrow Down navigation, then verify that a focused trigger keeps its tooltip open while ordinary scrolling still closes it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100