React Hook Form validation is done after an onChange event

[Jeltjo]

Version Number

7.33.1

Codesandbox/Expo snack

https://codesandbox.io/s/gracious-herschel-5lt2ll?file=/src/App.js

Steps to reproduce

Trying to fill in some form fields based on a input of another form field when this is valid. Fairly new to react hook forms, so perhaps I'm looking at this all wrong. Issue I'm facing is that the onchange is triggered sooner than the validation and the value look to be one step behind

When the onChange is triggered, the errors is empty is some cases where it shouldn't be and it continues with invalid data.
How can I make sure the validation is done before the onChange event.

In the codesandbox, when you begin to type. the initial console is 1 and errors is undefined (which is incorrect) and going on to 12345 and then back to 1. When it's 1234 the error should be undefined, it's only undefined in the next onchange

Expected behaviour

We the getAddress is called, the errors should reflect the value of the input

What browsers are you seeing the problem on?

Chrome

Relevant log output

undefined '1'
{type: 'minLength', message: 'postalCode must have at least 4 characters', ref: input} '12'
{type: 'minLength', message: 'postalCode must have at least 4 characters', ref: input} '123'
{type: 'minLength', message: 'postalCode must have at least 4 characters', ref: input} '1234'
undefined '12345'
undefined '1'

Code of Conduct

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

[bluebill1049]

thanks for the detailed issue report, form state is always re-rendered in the next render with formState update not within your validation callback.

[Jeltjo]

Ok, so this use case, how would you solve this?

[Yankovsky]

I believe, that you can do that this way:

const x = register('address.postalCode')
return (
  <input {...x} onChange={async (e) => {
    // Validation is async and onChange returns promise
    // https://github.com/react-hook-form/react-hook-form/blob/master/src/logic/createFormControl.ts#L735
    await x.onChange(e)
    // Call your custom onChange handler
    onChange()
  }}/>
)}

[Yankovsky]

If you pass onChange as object param to register, then it will be executed before validation https://github.com/react-hook-form/react-hook-form/blob/master/src/logic/createFormControl.ts#L682