final-form / final-form/react-final-form
[Race condition] Multiple fields with async validators not updating field state in this user interaction
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Bug Report
### What is the current behavior?
If I have two fields on the page that both use async validators, there is a scenario where my first validator function doesn't correctly update the form state. See this sandbox:
https://codesandbox.io/s/gracious-payne-6ekgy
To replicate:
1) Type something random into field 1
2) While field 1 is validating and before the validation function resolves, focus onto field 2 and type "B" into it, which is the value that makes field 2 valid
3) Notice that field 1's state remains stuck in `{valid: true}` and `{validating: true}`.
4) Notice that my form state is `{valid: true}`, even though my async validator returns an error and should have updated the form state accordingly
### What is the expected behavior?
I would have expected that when I perform the above interaction
* my field 1 validator should have updated field 1s state to `{invalid: true}` and `{validating: false}` after returning an error
* my form should be invalid
### Sandbox Link
### What's your environment?
React final form 6.4
Final form 4.19.1
Happens on my mac in both safari and chrome
### Other information
Contributor guide
Research direction
Start by reproducing the interaction in the linked CodeSandbox with two asynchronous validators. Trace how React Final Form updates field and form state when the second field changes before the first validator resolves; done means the first field becomes invalid with validating false and the form becomes invalid after its validator returns an error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100