issue: Field disabled state not correct on initial render

[thomasdbock]

Version Number

7.48.2

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/purple-frost-zfytqd

Steps to reproduce

1. Go to https://codesandbox.io/p/sandbox/purple-frost-zfytqd
2. Notice the "First name" field which is currently enabled
3. Toggle the field state by pressing either button (toggle field)
4. Notice the field is still enabled
5. Toggle again (repeat step 3)
6. Notice the field is now correctly disabled

Expected behaviour

Since the fieldState was disabled by default, I expect the field to have the disabled state when the page has finished rendering.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Relevant log output

Not a log, but manually mapping each field property except the ref fixes this issue.

Code of Conduct

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

[thomasdbock]

Not providing a disabled property in useForm also fixes this issue: https://codesandbox.io/p/sandbox/cranky-keldysh-pxd5hv

[bluebill1049]

this is close to chicken and egg problem, we can either take field level > form level or form level > field level.

[thomasdbock]

Hey @bluebill1049
For me the case is as follows:
Form state is used as "edit mode on/off", field disable state is conditional with another checkbox controlling it (but default off).

I think if one of them is false, it should disable the field.
Right now the field is saying it's disabled, but it really isn't. In my use case, this is causing UX side effects since I have no clear way of knowing if it is truly disabled.

Then again, I never expect disabled: false to explicitly "enable" the fields if some other part is disabling it.
I considered it as an OR state (disabled: field.disabled || form.disabled)