Tooltip in Table closes automatically for keyboard users

[rothsandro]

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

[snowystinger]

Issue 1

I think this one is #8686 ?

Issue 2

I'm not sure what the issue is with this one? Focus goes to the next row, which doesn't have a tooltip and when I arrow to the Menu, the tooltips displays.

Neither issue seem to cover the Shift+Tab back into the table that the top level of the description talks about? I do see a strange shift in the page when i tab out of the table. I think it's due to the collection moving focus to the last tabbable element in the table so that the browser can pick it up from there and move out of the Table entirely (as you noted in your description). I'm guessing that that causes the last menu's tooltip to open briefly.

You could control the open state of the tooltip and if it tries to open, you can then wait for scroll end (or poll), then set it to open at that point if the trigger still has focus?

[rothsandro]

Issue 1: I don't think that 8686 is related, the other issue is about how focus is restored but here it's about the tooltip. Here's a video showing the problem. Initially moving focus into the grid and navigating to the menu button via ArrowRight properly shows the tooltip. Then tabbing out of the grid (to the "Demo" button) and the back into the grid (Shift+Tab) restores the focus correctly to the "..." menu button but the tooltip is only shown for a very short period.

table-tooltip-issue-1.mp4

Issue 2: If I tab into the grid, navigate to the menu button via ArrowRight and then press ArrowDown multiple times, the focus moves between the menu buttons not the rows (as expected). But the tooltip doesn't always properly appear.

Edit: Sorry, the tooltip animation looks a bit weird in the recording but is actually fine, it's just an issue with the Windows Snipping Tool. But you can see that the tooltip is sometimes closed while the focus is still on the menu button.

table-tooltip-issue-2.mp4

You could control the open state of the tooltip and if it tries to open, you can then wait for scroll end (or poll), then set it to open at that point if the trigger still has focus?

Yes, something like this may be a possible workaround on our side.

[snowystinger]

make sure the preview window is wide enough so the table so you can see the columns

Ah, this comment makes more sense now. I thought I was seeing all of the columns, but from your video, I was not. Thanks for that

If you console.trace in the close,

react-spectrum/packages/react-stately/src/tooltip/useTooltipTriggerState.ts

Line 212 in d1c8b1e

close: hideTooltip

does it show what's causing it to close? Should be a hopefully easy way to check if it is due to scrolling.

[rothsandro]

I added a debugger and from the call stack we can see it's coming from scrolling

table-tooltip-scroll.mp4