issue: Usage of field values from useController differs from usage of register props in term of populating default value

[kalkv]

Version Number

7.52.1

Codesandbox/Expo snack

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

Steps to reproduce

1. Replace spreading register with useController field spreading.

Expected behaviour

We are in the process of refactoring our approach to defining form controls in our app. Our goal is to stop using register inside our generic components, for example. Instead, we aim to register them just next to the useForm and FormProvider usage, where we define forms. Simply put, we want to transform uncontrolled components into controlled ones. To assign inputs, we plan to use useController and spread ...field from it, registering form fields somewhere above, in useEffect.

The problem arises with some controls. Radio inputs are an exceptional case of form control on websites, and this seems to be true in react-hook-form as well. As I understand the concept of useController and the purpose of giving the ref and all other props that register typically provides to input controls, RHF should auto-populate the defaultValue defined in useForm's defaultValues object when using field values from the useController hook. But this never happens.

Form usage:

import { FormProvider, useForm } from 'react-hook-form';
import { RadioController } from './RadioController';

function App() {
  const form = useForm({
    defaultValues: {
      amount: '50',
      amount2: '50',
    },
  });

  return (
    <FormProvider {...form}>
      <RadioController name="amount" label="20" value="20" />
      <RadioController name="amount" label="50" value="50" />
      <RadioController name="amount" label="100" value="100" />

      <br />

      <label>
        20
        <input type="radio" {...form.register('amount2')} value="20" />
      </label>
      <label>
        50
        <input type="radio" {...form.register('amount2')} value="50" />
      </label>
      <label>
        100
        <input type="radio" {...form.register('amount2')} value="100" />
      </label>
    </FormProvider>
  );
}

export default App;

And component using useController:

import { useController } from 'react-hook-form';

interface RadioControllerProps {
  name: string;
  label: string;
  value: string;
}

export const RadioController = ({
  name,
  label,
  value,
}: RadioControllerProps) => {
  const { field } = useController({ name });

  return (
    <label>
      {label}
      <input type="radio" {...field} value={value} />
    </label>
  );
};

Initial render result:

Assigning checked={field.value === value} to a input solves this problem, but this is not required in case of ...register(). Thus we are suspecting this problem is not intended.

Am I missing something in the documentation and is there some reasoning behind this behavior or is it a bug?

Note: exact same case with checkbox.

Demo: https://stackblitz.com/edit/vitejs-vite-27etjv?file=src%2FApp.tsx

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

Thanks for the detailed issue report. This is expected.

• register has library own impl detail for input radio/checkbox with same name
• Controller is probably what you after by building your own implementation and wrapped with Controller to update, collect and validate user submission data