RAC RadioGroup + React Hook Form

[stevegreco]

I have been trying to hook up all of our form inputs using react-hook-form, as that is what most of our adopters are using within their apps. I have struggled a little bit with forwarding the correct refs to ensure that RHF can properly manage the focus.

The issue I am having with the RadioGroup is that if I mark it as isRequired and let RHF handle the validation, using validationBehavior="aria", I am noticing that the RadioGroup does not get focused when you submit the form.

I believe the expected behavior is that when you submit, the first invalid form field should get focused.

In my example below, if you just submit the form it will correctly become invalid without any sort of focus. If you comment out the validationBehavior="aria" then the focus works correctly, but not the validation.

Just kind of curious if anyone has any advice on this type of stuff. I would love to see more detailed docs for each form component on how to integrate with a library like react-hook-form.

https://stackblitz.com/edit/vitejs-vite-4cghepvy?file=src%2FApp.tsx

[snowystinger]

I think you just had the ref going to two places? If I set it to just the first Radio it appears to work as expected? https://stackblitz.com/edit/vitejs-vite-5rnvklm5?file=src%2FApp.tsx

[stevegreco]

That might have been a mistake on my part as I was playing around with it. It seems like my issue here might have been the CSS that I copied from the docs site. That example is only utilizing the data-focus-visible and not data-focused which is what is being applied after the validation.

Adding this CSS seems to allow it to work with the ref on the first Radio. I am assuming this would be a similar pattern with the Checkbox?

&[data-focus-visible]:before,
&[data-focused]:before {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }

[snowystinger]

I think that will show the focus ring now when you click on a radio, no?
And now that I've said that, I remembered this has an issue. I think this one #6809 which should help you address your issue. And if you feel up for it, we're looking for a contribution there.

[stevegreco]

Yep, that is correct. Let me look into that issue and see if there is anything I can help with. This seems to be a blocker for our users that are using react-hook-form, which honestly is a good chunk of our internal user base.