submit() returns undefined instead of a Promise if there are async field validations

[cdauth]

I'm new to final-form, sorry if I'm missing or misunderstood something. I am trying to implement a form using react-final-form whose submit button shows a loading spinner and is disabled while the form is submitting. My form has some async field validators.

To detect when the form is submitting, I cannot use formState.submitting, because it is only set to true after all the validations have finished. It means that there is no immediate visual feedback when the user clicks the submit button. I also cannot use formState.validating || formState.submitting, because the form also validates when a value in the form is changed, so the submit button will be spinning/disabled even though the user didn't press it yet.

What I am trying to do instead is manage the submitting state by hand and set it to true when the submit button is clicked and false when the promise returned by formApi.submit() is resolved. Unfortunately, formApi.submit() returns undefined if the async validations have not been run yet or are still in progress. Only if all async validations have already finished when the submit button is pressed, the function returns a promise. This behaviour can also be clearly seen in the source code.

I believe that formApi.submit() should always return a Promise that is resolved when all validations and submission has been done. It also seems to me that it would be better if formState.submitting were already true while the validations are running due to calling formApi.submit().

I'm also interested whether anyone has a suggestion for a workaround.

[Deckstar]

Not the official package, but I fixed this in final-form-ts 1.0.12 😇