Async validation runs into race conditions.

[DarryQueen]

Version Number

7.43.5

Codesandbox/Expo snack

https://codesandbox.io/s/nifty-babycat-p934h8?file=/src/App.tsx

Steps to reproduce

1. Type "10" into the input box.
2. Wait 5 seconds (the validating text will disappear, but please wait a few more seconds).
3. A validation error will appear at the top, saying the value must be greater than 10.

This is probably because of the onChange mode, which reads "1" and then "10." The validation for "10" returns earlier and thus gets overriden by the validation for "1."

Expected behaviour

Validation should only apply on the most recent change handler.

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]

I am not sure what the issue is here, the validation run twice and that's expected.

[DarryQueen]

The sequential order here matters, right? The validation should have run twice, but the error message should reflect the most recent edit, not the most recent validation return. What is happening here is that the error message shows the result of validating "1" and not "10."

[bluebill1049]

can you share a video on this issue?

[DarryQueen]

Sure. Here's a video using the codesandbox link in the issue. "15" is valid, "1" is not. Notice the flicker from "valid" to "invalid" at the end (along with the error at the top).

[bluebill1049]

That's impossible for us to resolve your setTiemout inside a promise.

[DarryQueen]

The setTimeout inside of a promise is just meant to mock a network call. It doesn't do anything.

Ultimately what happens here is there are two calls two validate; one with "1" and one with "10." I've added promises in here to mock network calls of different latency. It's fine that the validation against "1" finishes later, but its result should not be kept. In other words, only the latest call to validate should be preserved.

[bluebill1049]

My bad, too busy in the morning, will take a look at it after work.