Skip to content
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

Open
dermyhughes opened this issue Jan 5, 2024 · 3 comments · May be fixed by #6954
Open

useFocusRing: isTextInput no longer toggling focus ring #5658

dermyhughes opened this issue Jan 5, 2024 · 3 comments · May be fixed by #6954
Labels
documentation Improvements or additions to documentation

Comments

@dermyhughes
Copy link

dermyhughes commented Jan 5, 2024

Provide a general summary of the issue here

Hi.

The useFocusRing hook has an option of isTextInput which from my understanding when false, a focus ring will be shown an input element with any interaction. When set to truethis 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 resolve isFocusVisible to true for all interactions when isTextInput: false. This seems to have changed with 3.15.0, as it works as expected with 3.14.3.

🤔 Expected Behavior?

When isTextInput: false, then isFocusVisible should resolve to true for all interactions.

This has worked until @react-aria/[email protected].

😯 Current Behavior

When isTextInput: false,isFocusVisible does not resolve to true for all interactions, only keyboard.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Try changing @react-aria/focus from 3.15.0 to 3.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

@LFDanLu
Copy link
Member

LFDanLu commented Jan 5, 2024

The useFocusRing hook has an option of isTextInput which from my understanding when false, a focus ring will be shown an input element with any interaction. When set to true this will change behaviour so the focus ring is only shown on keyboard interactions.

Not quite, setting isTextInput to false makes it so that we bypass this part of the code and use the current user modality as the way to determine if a focus ring should be shown. This still means only keyboard and virtual modalities will show a focus ring (aka clicking on a button/input won't display the focus ring since that is pointer modality). This behavior is the same in 3.14.3: https://codesandbox.io/p/sandbox/infallible-panna-forked-ddzqcm?file=%2Fpackage.json%3A11%2C33, clicking in the input field doesn't cause the focus ring to appear.

However, prior to this change: #5359, a input element that used useFocusRing and had isTextInput=false would render a focus ring if the user clicked into the field and then typed within it. However, we only want to show a focus ring when tabbing into or hitting Escape when within a input field, hence the addition of the automatic input element detection in that PR.

@dermyhughes
Copy link
Author

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?

@LFDanLu
Copy link
Member

LFDanLu commented Jan 6, 2024

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.

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?

Yep, that's correct

@LFDanLu LFDanLu added the documentation Improvements or additions to documentation label Jan 6, 2024
@snowystinger snowystinger linked a pull request Aug 27, 2024 that will close this issue
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
Status: ✏️ To Groom
Development

Successfully merging a pull request may close this issue.

2 participants