adobe/react-spectrum

isFocusVisible is not set on elements using react-hook-form

Open

#6,809 opened on Jul 31, 2024

View on GitHub
 (9 comments) (1 reaction) (0 assignees)TypeScript (1,500 forks)auto 404
FormRACbughelp wanted

Repository metrics

Stars
 (15,634 stars)
PR merge metrics
 (PR metrics pending)

Description

Provide a general summary of the issue here

When I use react-hook-form I cannot focus WITH isFocusVisible on the Select element.

The Select element itself gets the focus but without the isFocusVisible I cannot render a propper ring around the select.

https://github.com/user-attachments/assets/eed2395a-abfa-4ac5-ab0b-29cd4c0e3e0b

NOTE: I do understand that the components exposes a isFocused property that i could use to render the outline but that also means that after I select an element the outline will still be visible which is unwanted behavior.

🤔 Expected Behavior?

Once focus is set on the component via react-hook-form it should add the isFocusVisible property to it so the outline is shown.

😯 Current Behavior

No isFocusVisible gets set for Select, RadioGroup, CheckboxGroup etc...

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://github.com/zommerberg/react-aria-hook-form-bug

Version

"react-aria-components": "^1.3.1",

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Contributor guide

Research direction
Examine the focus visible logic in react aria's useFocusVisible and how react hook form triggers focus on wrapped components. Check if the custom focus event lacks the isFocusVisible flag and explore potential workarounds or patches in react aria components.
Tech stack
typescriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Needs investigation
Prerequisites
React
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40