onValueChange function assignment on RadioGroup gives type error when using Form and zodResolver

[ImPrankster]

I'm using the Form+RHF component with zodResolver in this typescript project, and uses the way shown in the example to use a enum on the formSchema and a RadioGroup. But when trying to assign the form's onChange function to the RadioGroups' onValueChange it gives a type error.

const formSchema = z.object({
  age: z.enum(["teenager", "adult"]),
  humourous: z.boolean(),
  dataRich: z.boolean(),
  imaginative: z.boolean(),
});

const UserSettingsFrom = (props: z.infer<typeof formSchema>) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: props,
  });

  <Form {...form}>
    <form className="space-y-8">
      <FormField
        control={form.control}
        name="age"
        render={({ field }) => (
          <FormItem>
            <FormLabel>I&apos;M</FormLabel>
            <FormControl>
              <RadioGroup
                onValueChange={field.onChange}
                defaultValue={field.value}
                className="space-x-2y flex"
              >
                <FormItem className="flex items-center space-x-2">
                  <FormControl>
                    <RadioGroupItem value="teenager" />
                  </FormControl>
                  <FormLabel htmlFor="r1" className="text-lg">
                    Teenager
                  </FormLabel>
                </FormItem>
                <FormItem className="flex items-center space-x-2">
                  <FormControl>
                    <RadioGroupItem value="adult" />
                  </FormControl>
                  <FormLabel htmlFor="r1" className="text-lg">
                    Adult
                  </FormLabel>
                </FormItem>
              </RadioGroup>
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </form>
  </Form>;
};

The error:

Type '(event: "teenager" | "adult" | ChangeEvent<Element>) => void' is not assignable to type '(value: string) => void'.
  Types of parameters 'event' and 'value' are incompatible.
    Type 'string' is not assignable to type '"teenager" | "adult" | ChangeEvent<Element>'.ts(2322)

[marcelblijleven]

Running into similar errors, it seems a recent release in react-hook-form caused this (https://github.com/react-hook-form/react-hook-form/pull/10342). Reverting react-hook-form to 7.44.3 helps for now

[dan5py]

As said by @marcelblijleven, it's a problem related to react-hook-form v7.45.0, which implemented a stricter type for the onChange callback. Version 7.45.1 reverted this feature so it should work normally now, also in the latest release.

[TinsFox]

As said by @marcelblijleven, it's a problem related to react-hook-form v7.45.0, which implemented a stricter type for the onChange callback. Version 7.45.1 reverted this feature so it should work normally now, also in the latest release.

Hey, @dan5py version 7.45.1 does not solve the problem

I just rolled back from version 7.45.1 to version 7.44.2

The latest product type is as follows

Is there any other solution?

[rafalzawadzki]

As said by @marcelblijleven, it's a problem related to react-hook-form v7.45.0, which implemented a stricter type for the onChange callback. Version 7.45.1 reverted this feature so it should work normally now, also in the latest release.

Hey, @dan5py version 7.45.1 does not solve the problem

I just rolled back from version 7.45.1 to version 7.44.2

Is there any other solution?

Update to 7.45.2

[tielushko]

Can confirm the issue is resolved with 7.45.2

[OsamaQureshi147]

I'm still getting the same TS error after upgrading to 7.46.1. Tried 7.45.2 also!

[junaid-1013]

this is my radio group I dont want to use it with form as I have many more components what is the problem in my code it is not working as I wanted

const [selectedJobType, setSelectedJobType] = useState("Fertilizing");

const handleRadioChange = (event) => { setSelectedJobType(event.target.value); };

          <RadioGroup
            value={selectedJobType}
            onChange={handleRadioChange}
            defaultValue="Fertilizing"
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="Fertilizing" id="Fertilizing" />
              <Label htmlFor="Fertilizing">Fertilizing</Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="Spraying" id="Spraying" />
              <Label htmlFor="Spraying">Spraying</Label>
            </div>
          </RadioGroup>

[coded58]

has this been resolved?? getting same error

[fimhoff]

Replace: <RadioGroup value={selectedJobType} onChange={handleRadioChange} defaultValue="Fertilizing" > by: <RadioGroup value={selectedJobType} onValueChange={handleRadioChange} defaultValue="Fertilizing" >

And

const handleRadioChange = (event) => {
    // setSelectedJobType(event.target.value);
    setSelectedJobType(event);
};

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.