issue: radio buttons are not checked when "disabled" property is set

[screendriver]

Version Number

7.51.3

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/stupefied-sun-hhlh96?file=%2Fsrc%2FApp.js

Steps to reproduce

1. Register radio buttons but with { disabled: false } as an option like for example {...register("theme", { disabled: false })}
2. Specify a defaultValues for one of these radio buttons
3. Nothing is checked by default
4. Now remove { disabled: false } like for example {...register("theme")}
5. The radio button is checked as it should be

So it seems that disabled, even when set to false, prevents the checked state to be set.

Expected behaviour

{...register("theme", { disabled: false })} should behave the same as {...register("theme")} and a radio button should always be checked when defaultValues was set for it.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

can you use readOnly instead?

[screendriver]

Yes, but semantically there is a difference between readonly and disabled.

[bluebill1049]

why would you want to set an item that has been disabled, as it's been disabled?

[screendriver]

Sorry I don't fully understand the question. My use case is that I have two lists of radio buttons in a form. Both lists have initially checked the very first radio button in that list. All of them are enabled when the list of radio buttons are initially rendered. When one of the radio buttons, other than the first one, gets checked in list A we need to disable all radio buttons in list B, or when one of the radio buttons in list B gets selected we need to disable all radio buttons in list A.

So both lists are mutual exclusive to the application and can't be selected at the same time, except both lists have the very first item checked.

So visually it is something like this (x means it is checked)

[0 x] [1] [2] [3]
[0 x] [1] [2] [3]

Both 0 are initially checked and not disabled. But when one of these two rows gets checked, the other row needs to be disabled completely except the user checks 0 again.

[erashu212]

@screendriver Your issue is valid and this is happening because of this line
https://github.com/react-hook-form/react-hook-form/blob/master/src/logic/createFormControl.ts#L278
When the expression is evaluated as null the defaultValue is not picked.

I'll propose a fix