Pending promises are not getting flushed when we use getValidator method of Field

[Akshay Khanna]

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