[Bug]: react-hook-form force you to fill a disabled/readOnly field

[kimgiutae]

Version Number

7.12.2

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi

Steps to reproduce

1. Go to https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi
2. Update all deps to latest stable
3. Go to the file Test.js
4. Add required rule to the register function inside input
5. Add readOnly or disabled in that input
6. Try to submit
7. Can't submit... the disabled input is required (?)

Expected behaviour

The form should submit even if a required field now is disabled.

What browsers are you seeing the problem on?

Edge

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

the question is why is disabled combined with required?

[kimgiutae]

Anyways I wonder how can I make that disabled rule dynamic.... I have to re-register the field with new options?

[bluebill1049]

did you add disabled to the register as param? regsiter('test', { disabled: ??})

[kimgiutae]

did you add disabled to the register as param? regsiter('test', { disabled: ??})

Yes

return <input {...methods.register("bill", { required: true, disabled: true })} />;

BTW, the native behaviour of web forms allows to submit even if a required field is disabled.

[kimgiutae]

I know that must be complex into the core functionallity.

But maybe a solution can be... when updating formState on submitting attempt... just ignore the fields that are now disabled/readOnly, and remove errors from formState/instance.

On other hand... it doesn't seems logic to put disabled as a rule. Rules are often static. But the whole point on disabling something is because you have to make something first to enabling. Why show it then?

Many thanks for the attention to my problem

[bluebill1049]

That's valid. I will get a PR to patch this. disabled input will abort validation.

[bluebill1049]

This issue will get patching in the next release, disabled input will skip the validation.

[kimgiutae]

Many thanks for building this amazing tool

[kimgiutae]

I should add the disabled prop on register... or this should be detected on input prop change?

If it is the first case... I have to unregister and register with disabled prop on/off ?

Also, I saw the logic in last commit, and seems to get the disabled state from register... in that case it won't detect when ref prop updates?

[bluebill1049]

at reigster api not as input attribute

[kimgiutae]

So. How can I tell to react-hook-form that certain field disabled prop has changed?

As far as I know, register only occurs once on mounting...

[bluebill1049]

register is a function, it will get called again once the component re-render. it's really cheap to call register anyhow.

[kimgiutae]

Excellent. I'll test the new version and report any issue. Many thanks