final-form / final-form/react-final-form
Race condition for async field-level validation
- 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
### What is the current behavior?
Async field-level validation may silently fail if the async response times differ.
### What is the expected behavior?
That older ongoing promises are ignored, preventing potential "race conditions".
### Sandbox Link
A fork of the official async field-level validation example can be found here:
https://codesandbox.io/s/1zpv27y0qq
Notice how `usernameAvailable` now has a random (more realistic) response time:
```js
const randomBetween = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const usernameAvailable = async value => {
if (!value) {
return "Required";
}
await sleep(randomBetween(400, 2000));
if (
~["john", "paul", "george", "ringo"].indexOf(value && value.toLowerCase())
) {
return "Username taken!";
}
};
```
You don't need many attempt to see that validation will fail for the username.
### What's your environment?
Using Sandbox with the following dependencies:
```json
"dependencies": {
"final-form": "4.6.1",
"react": "16.3.2",
"react-dom": "16.3.2",
"react-final-form": "3.4.0",
"styled-components": "3.2.6"
}
```
Contributor guide
Assessment
This issue has not been assessed yet.