Make useController disabled flag optional / configurable

[larsinho81]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Hej,

The components internally integrate with react hook form state using the useConroller hook, like this:
const { field, fieldState: { error } } = useController({ name, control, disabled: rest.disabled, rules: rulesTmp });

In our project, using the disabled flag causes two kinds of problems:

1. The formState.isDirtyFlag is always true*
2. The values of the disabled fields are not included on submit

Which breaks a lot of functionality. We may be able to work around it in a bigger refactoring, but it would be ideal if there was the option to opt out of this behaviour, like a flag for example "registerDisabled=true" which can be disabled on component configuration and then the useController would be intiialized without the disabled flag.

`* That seems to be related to this:
react-hook-form/react-hook-form#4740

PS:
I can help work on a pull request if you are willing to consider this feature. Thanks!

Examples 🌈

No response

[dohomi]

Hi

I never came across your issue, are you sure you provide proper defaultValues? A reproduction would be helpful to understand your use case, rest.disalbled never caused any trouble in my projects so far.

If you have a solution sure open a PR I am happy to review it.

[larsinho81]

Hi,

yes we have to analyse an isolated example to unterstand exactly why it happens. We are using disabled state a lot for read only fields or forms, and provide all values into react hook form so they may be displayed. And we generally check if formstate.isDirty to prevent navigation, if the users made changes. I have the assumption that providing values for fields that are disabled might cause the issue, rendering isDirty true for the form without having any fields in the dirtyFields object. From your experience with the matter, do you think that is the case?

[dohomi]

I think this is not depending on this plugin but rather how react hook form is treating disabled fields:
react-hook-form/react-hook-form#2782
There is not much I can do about it, its I think just the way the RHF plugin is working. Maybe have a look at that repo and you might find examples on how to deal with it for your use

[dantheother]

2. The values of the disabled fields are not included on submit

This actually goes back to the HTML spec - disabled fields are not submitted to the server. https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-the-form-data-set

Readonly is usually better for preventing the user from editing the fields. A disabled field is considered not to exist in the data set, a readonly field exists but indicates that the user cannot edit it.