Unexpected useFocusRing behavior
See original GitHub issue🐛 Bug Report
useFocusRing seems to say a focus ring is required even if it isn’t in some cases.
🤔 Expected Behavior
I expect
- when hovering over the listbox initially, that useFocusRing returns false
- If I start using the keyboard, that useFocusRing returns true,
- If I go back to using the mouse, that useFocusRing return false
😯 Current Behavior
useFocusRing returns true in all 3 instances.
https://codesandbox.io/s/youthful-sanderson-f5wjkh?file=/src/Listbox.tsx
Notice that once the sandbox loads, and you initially hover over the listbox, the selection option has a focus ring. If you click outside the listbox, and hover back, the options no longer have the focus ring. Once you start using the keyboard, the focus ring appears again. However, if you go back to using the mouse, the ring remains visible (but it shouldn’t, because I’m not longer using the keyboard to navigate).
💁 Possible Solution
🔦 Context
I’m just trying to emulate Linear’s behavior, which is under the expected behavior
💻 Code Sample
https://codesandbox.io/s/youthful-sanderson-f5wjkh?file=/src/Listbox.tsx
🌍 Your Environment
Codesandbox, safari and chrome.
| Software | Version(s) | | ---------------- | ————— | | react-spectrum | | Browser | | Operating System |
🧢 Your Company/Team
🕷 Tracking Issue (optional)
Issue Analytics
- State:
- Created a year ago
- Comments:5 (3 by maintainers)

Top Related StackOverflow Question
You’d be looking for https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/index.ts#L19 It’s definitely a use at your own risk situation though. We don’t document it and it could change. It also causes a re-render in almost every one of our hooks (something we’re working on). I don’t think it hurts to be a little overly obvious with focus indicators. Most people using a mouse will click on something pretty quickly.
Ah, I see, that makes sense! Do you know of any way to achieve what I’m trying to do? We don’t have to change the interaction mode immediately on move; only once the mouse enters the boundary of a different item, you can switch the interaction mode to mouse, and have the focus ring disappear. Can I manually change the interaction mode on focus of a different section?