useFocusRing: isTextInput no longer toggling focus ring

[dermyhughes]

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/focus@3.16.0 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/focus@3.14.3.

😯 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/focus@3.16.0

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]

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]

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]

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