adobe / adobe/react-spectrum

Tooltip in Table closes automatically for keyboard users

Open
#10,333 4 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.