FocusRing: autoFocus fails to trigger focus on render

[ericbergh]

Provide a general summary of the issue here

The FocusRing component doesn't trigger focus on render when autoFocus is true.

🤔 Expected Behavior?

I expect FocusRing to focus the element passed via children on render when autoFocus is true.

😯 Current Behavior

No focus is given on render. The component does apply focusClass and focusRingClass when applying focus with the keyboard manually.

💁 Possible Solution

I suspect there might be something flawed with the logic seen here: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/focus/src/useFocusRing.ts#L48

🔦 Context

No response

🖥️ Steps to Reproduce

I have produced a minimal reproduction here: https://codesandbox.io/p/sandbox/focus-ring-bug-t97nxp

I also included the Button from React Aria Components to show that that works as expected.

Version

3.37.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

useFocusRing only chooses to show or hide the focus ring, it doesn't make a component focusable or handle auto focusing. You should use useFocusable for that.

See https://react-spectrum.adobe.com/react-aria/FocusRing.html#props

Whether the element will be auto focused.

Not that it will focus it.

I can see how this would be confusing, especially because we don't have a docs page for useFocusable.
You don't have to use that hook either, you should also be able to make your own autoFocus, just make sure the focus() is called in a useEffect as the native prop will move the focus before React can "react" to it (attach listeners).

[ericbergh]

Aha okay, yeah that distinction wasn't clear to me. Thank you for the clarification @snowystinger.