question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

  1. when hovering over the listbox initially, that useFocusRing returns false
  2. If I start using the keyboard, that useFocusRing returns true,
  3. 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:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
snowystingercommented, Aug 18, 2022

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.

0reactions
tanishqkancharlacommented, Aug 18, 2022

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

disable autofocus ring when switching between browser tabs ...
When I applied the useFocusRing hook to each (mapped) paginated button, I was getting unintended focus behavior: When I tab from the Previous...
Read more >
useFocusRing – React Aria - React Spectrum Libraries
The useFocusRing hook returns whether a focus ring should be displayed to indicate keyboard focus for a component. This helps keyboard users determine...
Read more >
Teaching Expected & Unexpected Behaviors the Right Way
Two commonly used vocabulary concepts are expected and unexpected behaviors. These terms have generated a lot of interest from our large and growing...
Read more >
TextArea Focus Ring Property is ON in the IDE but… - General ...
TextArea Focus Ring Property is ON in the IDE, but at design time. Unless this is local to my OS X machine, the...
Read more >
User's Manual
Camera behaving unexpectedly? Find the solution here. ... The behavior of the AE-L/AF-L button can be adjusted using.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found