-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useFocusRing: isTextInput no longer toggling focus ring #5658
Comments
Not quite, setting However, prior to this change: #5359, a input element that used |
Thank you. Seems like a misunderstanding on my part of what exactly the prop did. Is this documented anywhere? The description of "Whether the element is a text input" doesn't explain much. Thank you for clearing it up. Presumably if I wanted to maintain a focus ring for all interactiona including pointer, then I will need to use a traditional CSS pseduo selector? |
This isn't explicitly documented anyway, we can certainly look to make the props description better or even deprecate it since we do automatic detection now perhaps.
Yep, that's correct |
Provide a general summary of the issue here
Hi.
The useFocusRing hook has an option of
isTextInput
which from my understanding whenfalse
, a focus ring will be shown an input element with any interaction. When set totrue
this will change behaviour so the focus ring is only shown on keyboard interactions.There appears to be a regression or change where now a focus ring is never shown on input fields for non-keyboard interactions. Is this expected?
The current
@react-aria/[email protected]
does not resolveisFocusVisible
to true for all interactions whenisTextInput: false
. This seems to have changed with3.15.0
, as it works as expected with3.14.3
.🤔 Expected Behavior?
When
isTextInput: false
, thenisFocusVisible
should resolve totrue
for all interactions.This has worked until
@react-aria/[email protected]
.😯 Current Behavior
When
isTextInput: false
,isFocusVisible
does not resolve totrue
for all interactions, only keyboard.💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
Try changing
@react-aria/focus
from3.15.0
to3.14.3
.https://codesandbox.io/p/sandbox/infallible-panna-krjrj3?file=%2Fsrc%2FApp.js%3A4%2C75&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clr0gago800063b6h6ipq2mtl%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clr0gago800023b6h4cf9pq4n%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clr0gago800033b6hqojtj3tx%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clr0gago800053b6h6oph4utu%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clr0gago800023b6h4cf9pq4n%2522%253A%257B%2522id%2522%253A%2522clr0gago800023b6h4cf9pq4n%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clr0gmi7q00023b6hl7bjjmbp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522startColumn%2522%253A75%252C%2522endLineNumber%2522%253A4%252C%2522endColumn%2522%253A75%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clr0gmi7q00023b6hl7bjjmbp%2522%257D%252C%2522clr0gago800053b6h6oph4utu%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clr0gago800043b6h07n2si9d%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clr0gago800053b6h6oph4utu%2522%252C%2522activeTabId%2522%253A%2522clr0gago800043b6h07n2si9d%2522%257D%252C%2522clr0gago800033b6hqojtj3tx%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clr0gago800033b6hqojtj3tx%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D`
Version
Using @react-aria/[email protected]
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
MacOS Sonoma 14.2
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: