How to setFocus on first radio input using useController?

[bartonyoung]

I have a Form that is rendering a RadioGroup component. The RadioGroup component renders three radio inputs and uses useController to pass a ref to each. Everything works as expected, except when attempting to setFocus from the parent component, it always sets focus on the last radio input. How can I make it focus on the first?

Demo code here: https://codesandbox.io/p/sandbox/hook-form-radios-2xrfky?file=%2Fsrc%2FApp.js%3A33%2C34

You may need to refresh the display window to see it focusing on the last radio in the list.

FYI, the RadioGroup component mimics the basic pattern of a component I have to use in production, hence my usage of useController.

[tatsmaki]

I removed useEffect and used autoFocus on first input

https://codesandbox.io/p/sandbox/hook-form-radios-forked-ph33cj

[bartonyoung]

@tatsmaki thanks for the response. I also realized that the reason it was focusing on the last radio is because I passed the same ref to all three inputs.

I was trying to avoid autoFocus, but maybe it is the only way to do it in this scenario.

[tatsmaki]

Different refs will work 3rdRadioRef.current?.focus()
You can also assign 3 different ids and then just document.getElementById('3rd-radio-id').focus()