issue: Form validation behavior changes when the isValid form state is subscribed

[giggo1604]

Version Number

7.51.5

Codesandbox/Expo snack

#11923

Steps to reproduce

Hello,

kind of specific edge case but we found the issue in our production app. I created a PR with a cypress test to showcase the issue. It appears that async field validation is not working as expected (or at least the behavior is not the same) if the isValid form state is subscribed. If a field is blured before the debounced validation ever happens the field will never be validated. Also as far as I looked into it, this only happens in combination with mode onChange and a debounced validation function.

I am not quite sure if the debouncing approach is the problem but in my opinion it is a somewhat flaky implementation if we end up with different behavior depending on if isValid is subscribed or not.

I also tried to...

1. keep the validation function stable as i suspected this might be the issue but apparently it is not.
2. subscribe to isValid with useFormState which lead to the same result.

This issue was not introduced with the current version. We found it in 7.50.1.

Expected behaviour

The validation behavior should not depend on the isValid state. I expect the form to behave as in the example where isValid is not subscribed to.

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

No response

Code of Conduct

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

[ilteoood]

We have the same issue here.
I prepared the following codesandbox to show it: https://codesandbox.io/p/sandbox/trusting-elion-36hycc?file=%2Fsrc%2FApp.tsx%3A6%2C9

As you can see, if you extract isValid from the formState or from the useFormState hook, the validation function will be invoked also onBlur, even if the mode is explicitly configured as onChange.

Using a constant value, instead, behaves as expected (but of course, we lose the validation utility).

@bluebill1049 are we missing something, or is it a regression introduced recently?

[bluebill1049]

As you can see, if you extract isValid from the formState or from the useFormState hook, the validation function will be invoked also onBlur, even if the mode is explicitly configured as onChange.

isValid will run onChange, onBlur and onSubmit to check the validity of the form.

[ilteoood]

So do you have a suggestion to properly validate the form using an API only onChange?

[ilteoood]

Ping @bluebill1049