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

issue: Validation issue after unmounting fields #11802

Open
1 task done
KaranLala opened this issue Apr 19, 2024 · 4 comments
Open
1 task done

issue: Validation issue after unmounting fields #11802

KaranLala opened this issue Apr 19, 2024 · 4 comments
Labels
status: need more detail Please follow our issue template.

Comments

@KaranLala
Copy link

KaranLala commented Apr 19, 2024

Version Number

7.51.3

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-7-51-3-validation-bug-z7yz34?file=%2Fsrc%2Fvalidation-not-working.js

Steps to reproduce

  1. Go to 'https://codesandbox.io/p/sandbox/react-hook-form-7-51-3-validation-bug-z7yz34?file=%2Fsrc%2Fvalidation-not-working.js'
  2. Click on submit for the validation working from
  3. Notice the correct errors show up, one for text input and one for textarea
  4. Click on submit for the Validation For First Element Only Working Form
  5. Notice the error only show up first text input field

Expected behaviour

Not sure if it is expected or not, but its an easy trap to fall into. IMO isSubmitting should be true after validation. If this is as expected, a note about this in docs, or a new state that can be used to safely unmount the form during asynchronous operations would be helpful.
Using isValid && isSubmitting together seems to do the trick.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct
@bluebill1049 bluebill1049 added the status: need more detail Please follow our issue template. label May 5, 2024
@bluebill1049
Copy link
Member

bluebill1049 commented May 5, 2024

IMO isSubmitting should be true after validation.

not clear on what's reported here.

@KaranLala
Copy link
Author

KaranLala commented May 6, 2024

did you see the codesandbox and see that validation is not working as expected in the second form? i.e. validation is only being applied to the first input in the second form, when it should validate all fields.

This happens when the form is unmounted when isSubmitting is set to true. If this is expected then nothing needs to be fixed.

@bluebill1049
Copy link
Member

bluebill1049 commented May 6, 2024

did you see the codesandbox and see that validation is not working as expected in the second form? i.e. validation is only being applied to the first input in the second form, when it should validate all fields.

it wouldn't, rhf focus on single field validation at a time by design. if you need multiple use trigger

@KaranLala
Copy link
Author

KaranLala commented May 6, 2024

It's okay if RHF only validates one field at a time, however in this case, it only ever validates the first field. If you enter a value in the first field in the second form, it does not actually validate anything. You can see the image below.

react-hook-form-2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: need more detail Please follow our issue template.
Projects
None yet
Development

No branches or pull requests

2 participants