final-form / final-form/final-form
Pending promises are not getting flushed when we use getValidator method of Field
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 225
- 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 behaviour?
We are facing this issue when we trigger validations (using `getValidator`) on typing each character in the text field.
1. Whenever we type each character in the text field, we are calling `getValidator` method which in turn creates new promise for each call.

2. Inside each Promise call, we are wrapping our functionality inside `debounce` & due to which some promises are not getting settled ( stuck in the pending state). This is because `debounce` works in a way like it only resolve the last passed function when its timeout has elapsed. This issue is prominent in our [codesandbox](https://codesandbox.io/s/atlaskit-example-template-23ftq?file=/src/validatedForm.js) example when we type multiple characters too fast (not giving enough time to the previous promise to get resolved)
3. Hence whenever we click on the submit button (try submitting the form), we are unable to proceed, because some promise (which were ignored by `debounce`) are still stuck in the pending state.
4. On clicking submit, final form `submit` method returns in between if some promises are yet to be settled.
```
var asyncValidationPromisesKeys = Object.keys(asyncValidationPromises);
if (asyncValidationPromisesKeys.length) {
// still waiting on async validation to complete...
Promise.all(asyncValidationPromisesKeys.map(function (key) {
return asyncValidationPromises[Number(key)];
})).then(api.submit, console.error);
return;
}
```

### What is the expected behaviour?
`getValidator` should only cater to the last promise & not the previous ones. Or final-form should not return in between if pending promises are there in the queue (provided the last promise is resolved)
### Sandbox Link
https://codesandbox.io/s/atlaskit-example-template-23ftq?file=/src/validatedForm.js
Steps to reproduce in this example:-
1. Try typing fast in the first textbox & then clicking on the alert button which will not work.
2. Try the same with second text box & it will work as we have manually flushed old promises in it in `debounceFetch.js`
### What's your environment?
final-form ver: 4.20.0, OS: Mac 10.13.6 & Browser: Chrome: 83.0.4103.97
Contributor guide
Assessment
This issue has not been assessed yet.