Disabling and enabling form Inputs breaks their isDirty state

[michel-paiva]

What you were expecting:
When using a form input that is conditionally enabled/disabled by a switch:

• Changing the input's value triggers validation and marks the field as dirty (i.e., isDirty becomes true).
• Disabling the input should reset isDirty to false since validation shouldn't run on disabled inputs.
• Re-enabling the input should allow it to become dirty again when its value is changed, triggering validation as expected.

What happened instead:
After re-enabling a previously disabled input, changing its value does not set isDirty to true, and validation is not triggered for that field.

Steps to reproduce:

1. Create a form with an input field that has validation and can be disabled/enabled based on a switch or another condition.
2. Change the value of the input and observe that validation runs as expected.
3. Disable the input, then re-enable it using the switch.
4. Change the input value again. Notice that validation does not run, and the field does not become dirty.

Reproduction Link:

• Example on StackBlitz

In this example, after toggling the switch, the "title" field can be submitted with an empty value, even though it is marked as required.

Other information:
After investigating, I believe this issue is caused by this PR. When the input is re-enabled, disabled = undefined is passed to react-hook-form's controller, but it seems the controller doesn't fully clear the disabled state internally, preventing the field from becoming dirty again.

Does the original issue with react-hook-form that the workaround was intended to fix still persist?
It seems like it was fixed here maybe we can remove that workaround.

[slax57]

Thanks for this report!

I have reproduced the issue, and confirm removing the workaround fixes it.

Would you like to open a PR to fix this issue?

Thanks.

[michel-paiva]

There seems to be a deeper bug, if a boolean value is given to an Input and you try to change that input it gets on a infinite loop.

Only mention I see of it is here react-hook-form/react-hook-form#11287

[michel-paiva]

After some investigation I found out that upgrading to react-hook-form 7.53.0 fixed the infinite loop issue.

react-hook-form/react-hook-form#12041

[slax57]

Fixed via #10163