Initially disabled inputs are not validated after enabled when form is submitted

[endrits079]

What you were expecting:

I have a form with 2 inputs, both inputs are required but the second is disabled if there is no value for the first input, after I provide a value for the first input the second input becomes enabled but if I submit the form without providing a value for second input the form submission should failed because the required() should fail, What happened instead:

The form was submitted and ignored the fact that there is no value on a required() validation input. Steps to reproduce:

1.Go to create post, Fill in the required fields but leave the average_note blank, it is required() and minimum 1 but it can submit the form without providing value for it

Related code:

• Preferably, a sandbox forked from https://stackblitz.com/edit/github-xm5t9q?file=src%2Fposts%2FPostCreate.tsx

  
  **Environment**

• React-admin version:4.16.18

• Last version that did not exhibit the issue (if applicable):

• React version:17.0

• Browser:Chrome

• Stack trace (in case of a JS error):

[adguernier]

Reproduced, thanks. This issue seems to be related to #9753.

For now, you can use the validate prop of the <Form> component to apply the validation you need.

[fzaninotto]

Indeed, if you replace disabled by readOnly, the problem disappears. I suspect this is a react-hook-form bug.

[endrits079]

Indeed, if you replace disabled by readOnly, the problem disappears. I suspect this is a react-hook-form bug.

I didn't check in details how are you using react hook form but I tried a basic example with react hook only and it was working fine

[slax57]

@endrits079 we had issues in the past with a breaking change introduced by RHF in version 7.47.0 which affected disabled inputs. That's why we made sure the readOnly prop is supported on every input component in react-admin (https://github.com/marmelab/react-admin/pull/9656). If using readOnly allows to fix the problem, we will consider this issue solved. If using readOnly cannot be applied in your case, feel free to elaborate.

[fzaninotto]

@endrits079 Any updates?

[endrits079]

@endrits079 Any updates?

using readonly indeed solved the issue, but introduced a new issue, because it was validating readonly fields so I had to change the validation logic to ignore readonly fields

[slax57]

Fixed via https://github.com/marmelab/react-admin/pull/10163