issue: Validation issue after unmounting fields

[KaranLala]

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]

IMO isSubmitting should be true after validation.

not clear on what's reported here.

[KaranLala]

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]

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]

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.

[erashu212]

Hi @KaranLala ,

In your InvalidForm you have conditional rendering

if (isSubmitting) return <div>Loading...</div>;

as soon as you click the submit button this sets as true which unmount other elements but validations are still in process for other form field.

when the RHF goes for other field like textarea in your case, found it as unmount that is why validation does not appear.

You can try this way if you want all error message to be appeared

 let {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({ criteriaMode: "all" });

[KaranLala]

Thank you for your response. I've updated the code sandbox to include the criteriaMode option but it still doesn't seem to work. https://codesandbox.io/p/sandbox/react-hook-form-7-51-3-validation-bug-z7yz34?file=%2Fsrc%2Fvalidation-not-working.js%3A10%2C15

[zhangwc777]

Hello, I had the same problem, but I'm using a virtual list. I went down to 7.0.0 and it pretty much fixed the problem. This is a different link. What is the final solution to this kind of problem? #8740

[zhangwc777]

What I'm going to do is validate all the fields in the useForm. Instead of the viewport, and keep the error message. Because I need to properly show validation failures when scrolling.