How to use async validation with isValid from FormState

[keanan]

Hello,

I am not sure if this is an issue/bug however I am unable to get async validation working correctly with isValid from formState (using mode: "onChange").

It seems that when using isValid the async validator is called immediately on first render and then twice on each onChange event, this occurs even with other inputs which do not have an async validation rule attached.

When removing isValid the validation works as intended.

Please find a code sample here

Any suggestions or solutions are appreciated, thank-you.

[leapful]

@keanan @bluebill1049 : It seems "getProxyFormState" function overrides default state of flag "isValid" and causes wrong default validation handling since "isValid" should be "false" but now is always "all" and be a truthy value.

react-hook-form/src/logic/getProxyFormState.ts

Lines 17 to 19 in ce16d2f

	if (_proxyFormState[_key] !== VALIDATION_MODE.all) {
	_proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
	}

@bluebill1049 : Could we add a check "isString" for "_proxyFormState[_key]" to avoid overriding wrong data type ?

[leapful]

@bluebill1049 : Sorry for late response, I've been busy last 2 days :D

As I remembered, the default behavior of validation strategy "onChange" should be applied on the target touched input, is it correct ? Or it has been changed to validate all inputs even when just one input is touched ? If so, then it's the expected behavior for the codesandbox sample of this issue.

[bluebill1049]

no worries at all, @leapful thanks for the help that you always provide. if user subscribed to isValid formState, then the state should reflect the validity of the entire form, which means all validation will get executed after the form is mounted.

[keanan]

Hi @bluebill1049 thank-you for your attention to this.
In case my description was not clear, I wanted to please confirm. When using isValid on a form with, for example 2 inputs, where the first input has an async validator rule and the second does not.
What is happening is that the validation from the first input is being called on each onChange event from the second input (or any other inputs that may exist on the form).
@leapful thank-you very much for looking at this 🙏

[bluebill1049]

no worries

isValid: the state is monitoring the entire form validity (including each change on the input)

and

mode: onChange: will update the errors and isValid state when the user interacts with inputs

[novakdan]

@bluebill1049 Hello, I have been investigating the very same thing as @keanan was in this thread. As I'm debugging, I see that once isValid has been read from in a submit function if I have invalid data, the getProxyFormState overwrites the proxy state with a wrong value, making isValid indeed "all" and therefore upon every subsequent keystroke in a different input field, it's firing the whole schema validation, making the huge form quite slow. Is there a fix for it or is it not considered a bug anymore? Thank you!