[RAC] `<Link>` gets `focus-outline` attributes on window blur.
Opened this issue · 6 comments
Provide a general summary of the issue here
On mobile, when a Link is touched, it gets focus-outline attributes and styles on window blur. For client-side routing, if I switch apps to trigger the window blur and then return to the application, the last triggered link retains the focus-outline style.
🤔 Expected Behavior?
The <Link> should not receive the focus-outline style under any circumstances on mobile.
Based on the documentation:
isFocusVisible [data-focus-visible] Whether the link is keyboard focused.
😯 Current Behavior
The <Link> gets focus-outline style and attributes on the window blur event. This issue can be easily reproduced on both the website examples and the official public Storybook.
💁 Possible Solution
No response
🔦 Context
We are using the <Link> component in the Tab Bar of our mobile navigation, which has a focus-outline style defined. When switching applications back and forth, our Tab Bar links receive the focus-outline style. This is not the expected behavior.
🖥️ Steps to Reproduce
- Visit the Link component page either on the [website](https://react-spectrum.adobe.com/react-aria/Link.html) or the [storybook](https://react-spectrum.adobe.com/react-aria-starter/?path=/story/link--example) on a mobile device.
- Touch any of the links.
- After the link opens, return to the source page.
- Verify that the links have received the
focus-outlinestyle.
Screen recordings:
- [website](https://github.com/user-attachments/assets/a36a03f8-afb5-4e1f-bd03-d02726fcbd0c)
- [storybook](https://github.com/user-attachments/assets/bcddb5f5-4245-427f-90e8-317e3e3b9051)
Version
1.5.0
What browsers are you seeing the problem on?
Chrome, Safari
If other, please specify.
No response
What operating system are you using?
iOS 18
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
What device and iOS version are you using? I can't seem to reproduce on my iPhone 13 + iOS 18. Here's a
of what I'm seeing:
ScreenRecording_12-05-2024.11-33-45_1.MP4
I work with endre - I just tried and I can reproduce.
iPhone 15, iOS 18.
it happened 3 times in a row but only the first time. After clicking away from the link it’s no longer reproducible.
Ok fourth time it didn’t happen, fifth it did
Ah, okay I can reproduce it now. Thanks for the additional information. At least for me, I have to touch it in a certain way for it to render with the focus ring but I haven't been able to get it consistently.