react-aria RadioGroup with react-hook-form & zod validation: focus question

[Mrtly]

Wondering if this is expected behavior, a bug, or there is a mistake in the implementation.

When a field is required, and submit is called, the focus should move from the submit button to the field that has the error.
In the case of the RadioGroup, the field (first radio) is not focused when there is an error.

I have used this RHF/Zod implementation with other react-aria components and the required field is focused correctly.

Note the noValidate on the form so that Zod can take over the validation instead. The focus works correctly in native validation but not when trying to focus it manually via the field.ref.

on react-aria-components@1.1.1

import { z } from "zod";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { RadioGroup, Radio, Label } from "react-aria-components";

const FormSchema = z.object({
  fav_pet: z.enum(["dog", "cat", "dragon"], {
    required_error: "You need to select a pet",
  }),
});

export default function App() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });
  const onSubmit = (data) => console.log(data);

  return (
    <>
      <form noValidate onSubmit={handleSubmit(onSubmit)} className="form">
        <Controller
          control={control}
          name="fav_pet"
          render={({ field: { name, value, onChange, onBlur, ref } }) => (
            <RadioGroup
              name={name}
              value={value}
              onChange={onChange}
              onBlur={onBlur}
              ref={ref}
              isRequired
              className="flex flex-col gap-2"
            >
              <Label className="font-semibold">Favorite pet</Label>
              <Radio
                value="dog"
                className='border-2 border-transparent data-[selected="true"]:border-purple focus:border-blue focus-visible:border-green'
              >
                Dog
              </Radio>
              <Radio
                value="cat"
                className='border-2 border-transparent data-[selected="true"]:border-purple focus:border-blue focus-visible:border-green'
              >
                Cat
              </Radio>
              <Radio
                value="dragon"
                className='border-2 border-transparent data-[selected="true"]:border-purple focus:border-blue focus-visible:border-green'
              >
                Dragon
              </Radio>
            </RadioGroup>
          )}
        />

        {errors.fav_pet && (
          <div className="text-error">{errors.fav_pet.message}</div>
        )}

        <button type="submit">submit</button>
      </form>
    </>
  );
}

[snowystinger]

RadioGroup doesn't expose a focusable ref, we could consider doing that.
It looks like we don't expose the inputRef to the Radio ref either. So that could also be an option.

I think using useImperitiveHandle on the RadioGroup though makes the most sense since it's aware of the roving tab index already

[steveoh]

Has the focusable ref made it into a release or is there an issue to track

[snowystinger]

I swear there was a PR to do this and that we had to close it for some reason. But for the life of me, I cannot find it nor remember why it would have been closed. I must be remembering the wrong thing.

I found one that allows you to pass a ref to individual Radios, so you could work around it with that.

If you'd like to contribute, I can't find anything suggesting we wouldn't consider this.

[Mrtly]

This was the PR intended for this #6067

I think you remember it correctly but the idea got vetoed halfway in the comments and the PR itself was changed

[snowystinger]

Thank you so much for that, it was hidden down in a resolved comment. I missed it when searching earlier.

Relevant information

We want to align on the work that was done in the other PR for checkbox and switch and expose an inputRef on radios.
We also no longer want to expose the imperative handler, it may be unexpected.

As for the issue I brought up earlier about the roving tabIndex, we decided it was a non-issue. This is because it is recommended that RadioGroups have a default and do not usually participate in constraint validation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#validation
So it should be unusual that focus gets sent back to a radio group. If it does, the roving tab index will sort itself out when one of the other options is selected.

Looks like the suggestion is to call focus on the individual Radio's as needed.

[Mrtly]

Thank you for the response. My team are switching all form fields to rac, so would certainly appreciate the focusable ref addition.