radio buttons are not selected by default when using with useController in NextJs app but working in react app

[rawatnaresh]

I've simple nextjs page in which I'm using useController with radio buttons which have some default values but the radio button is not selected based on default values.

Radios are only selected by default when using with register
Here's codesandbox example

NextJS example with react-hook-form

"use client";

import { useController, Control, useForm } from "react-hook-form";

function TypeSelector({ control }: { control: Control<any> }) {
  const { field } = useController({
    control,
    name: "type",
    defaultValue: "text",
  });

  return (
    <div>
      <p>useController::Default type should be text</p>

      <label>
        <input type="radio" {...field} value={"media"} />
        Media
      </label>
      <label>
        <input type="radio" {...field} value={"text"} />
        Text
      </label>
    </div>
  );
}
export default function Home() {
  const { control, register } = useForm({
    defaultValues: {
      type: "text",
      gender: "male",
    },
  });
  return (
    <div>
      <TypeSelector control={control} />
      <p>register::Default gender should be male</p>
      <label>
        <input type="radio" {...register("gender")} value={"male"} />
        Male
      </label>
      <label>
        <input type="radio" {...register("gender")} value={"female"} />
        Female
      </label>
    </div>
  );
}

But same thing is working fine in react.

Codesandbox exmaple in react

ReactJS example with react-hook-form

import { useController, Control, useForm } from "react-hook-form";

function TypeSelector({ control }: { control: Control<any> }) {
  const { field } = useController({
    control,
    name: "type",
    defaultValue: "text",
  });

  return (
    <div>
      <p>useController::Default type should be text</p>

      <label>
        <input type="radio" {...field} value={"media"} />
        Media
      </label>
      <label>
        <input type="radio" {...field} value={"text"} />
        Text
      </label>
    </div>
  );
}
export default function Home() {
  const { control, register } = useForm({
    defaultValues: {
      type: "text",
      gender: "male",
    },
  });
  return (
    <div>
      <TypeSelector control={control} />
      <p>register::Default gender should be male</p>
      <label>
        <input type="radio" {...register("gender")} value={"male"} />
        Male
      </label>
      <label>
        <input type="radio" {...register("gender")} value={"female"} />
        Female
      </label>
    </div>
  );
}

[sujinleeme]

Hi,

1. React hook form version

First of all, the ReactJS example with react-hook-form uses "react-hook-form": "7.4.1" whereas the next js version uses "react-hook-form": "7.50". If you update to the latest version, you can observe the same behaviour; the first radio button doesn't set the default value.

Probably, it looks like the old react-hook-form's controller updates the checked like register() by refs.

2. How to select the default value on the radio input with useController

You can simply add the defaultChecked or checked prop, but not both.

<input type="radio" {...field} value={"media"} defaultChecked />

Also, you don't need to set defaultValue again because you already give defaultValues in the useForm.

  const { field } = useController({
    control,
    name: "type",
  });

Here is the next.js version codesandbox.