Skip to content

useFocusRing: isTextInput no longer toggling focus ring #5658

Open
@dermyhughes

Description

@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/[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

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    • Status

      🩺 To Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions