Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
endrits079 opened this issue May 23, 2024 · 7 comments · Fixed by #10163
Closed
Labels

Comments

@endrits079
Copy link

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:

**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
Copy link
Contributor

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.

@adguernier adguernier added the bug label May 23, 2024
@fzaninotto
Copy link
Member

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

@endrits079
Copy link
Author

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
Copy link
Contributor

slax57 commented May 27, 2024

@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 (#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
Copy link
Member

@endrits079 Any updates?

@endrits079
Copy link
Author

@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
Copy link
Contributor

slax57 commented Aug 30, 2024

Fixed via #10163

@slax57 slax57 closed this as completed Aug 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants