react-hook-form: Errors properties off by one render outside render

Describe the bug When we need to do something after the validation (in another function) is done, it seems like errors-properties are off by one render on their values.

To Reproduce Steps to reproduce the behavior:

Open console (to see output)
Go to firstName input-field
Remove John
Insert a single space-character ’ ’
Click outside input-field (to trigger onBlur)
Look at console-output
Go to firstName input-field
Remove the single space and leave input blank
Click outside input-field (to trigger onBlur)
Look at console-output

Codesandbox link (Required) https://codesandbox.io/s/small-thunder-nq0t4

Expected behavior Expected that errors.firstName contains the error as the same as error does in the console.

Screenshots (Image above) This one shows that errors contains the correct error, but errors.firstName is undefined. Should not say Do something. The UI-error is correct.

(Image above) This one shows that errors contains the correct error, but errors.firstName is errors previous value. Should say Don't do something. The UI-error is correct.

Additional context Have tried the same in JS (not TS) same result. Tested on version: 7.2.2 and 7.1.1

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 18 (10 by maintainers)

Most upvoted comments

Can’t reproduce the error on CodeSandbox, maybe there is something else conflicting in my project. So i confirm that all problems gone with this v7.2.4-beta.0

EDIT: For who has the same problem. The new version has spread {…register} with onChange prop, so if you need to define onChange conditionally, define before the {…register}.

MercurialWeb on Apr 22, 2021

Another way is using useEffect with formState as dep and check the errors object, achievable but a bit more difficult.

Looked at that solution earlier, but got nasty when our forms are getting bigger.

you can try with this beta: v7.2.4-beta.0

https://codesandbox.io/s/throbbing-snow-ji72p

Seems like it works nicely! Tested in codesandbox.io and on my local project.

Had to change from e.currentTarget.value to e.target.value Cause the currentTarget is null. Guess it has something to do with the async, but not any issue.

kongebra on Apr 22, 2021

by the way, trigger is async. I think this PR may resolve your issue: #4856

Yeah if trigger is async then having a Promise would help to do things in the correct order.

How can I test the code in that PR?

I will release a beta tonight for you.

bluebill1049 on Apr 22, 2021

@bluebill1049 Yes, when trying to access errors.firstName as in this example, it will be undefined and I will “Do something” even though it actually has an error.

kongebra on Apr 22, 2021

Thanks, @kongebra for the very detailed issue report! I wish every issue report is like that. ❤️ Is this issue related to the stale errors object inside of your validationOutSide? Are you referring to the errors inside the callback that is behind one render?

bluebill1049 on Apr 21, 2021

I have the same issue

St3ff1 on Apr 21, 2021