Bug: Tabbing away from a Tooltip inside a Dialog moves focus to the Dialog root
Bug report
Current Behavior
When a tooltip is inside a dialog, tabbing away from the tooltip button moves focus back to the dialog root instead of the next focusable element in the dialog.
In this video made using the reproduction below you can see that, when I tab away from the Tooltip button, focus skips After tooltip entirely and goes straight to the dialog root.
At the end of the video, I press Escape before tabbing away from the tooltip. This closes the tooltip and then focus moves as expected.
https://github.com/user-attachments/assets/60f6d249-ca24-43f8-a612-7ec937326f43
Expected behavior
When you press tab while focused on a tooltip button, focus should move to the next focusable element.
Reproducible example
Suggested solution
I'm not familiar enough with the codebase to make a definite suggestion here. It might have something to do with react-focus-lock?
Additional context
When tabbing away from the tooltip button, the focusout event that fires does indeed have a relatedTarget set to the next element in the tab order. So something in the Dialog component is likely listening to that and manually changing the focus.
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | react-dialog, react-tooltip | 1.1.2, 1.1.3 |
| React | n/a | 18.3 |
| Browser | Arc | Version 1.65.0 (54911) -- Chromium Engine Version 130.0.6723.59 |
| Assistive tech | n/a | n/a |
| Node | n/a | 20.9 |
| npm/yarn | bun | 1.0.7 |
| Operating System | MacOS | Sonoma 14.4.1 |
Source: radix-ui/primitives