final-form / final-form/react-final-form

[Race condition] Multiple fields with async validators not updating field state in this user interaction

Open
#788 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.