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

Race condition for async field-level validation

Open
#437 2 comments 1 reaction 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

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.