final-form / final-form/react-final-form
Async submit handler doesn't reset form state if await operator is not used
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
When using an async submit handler the `submitting` state is not correctly reset on the second and subsequent submissions if the `await` operator is not used within the handler.
### Steps to reproduce
1. Open the [sandbox based on the simple example](https://codesandbox.io/s/trusting-forest-bp28h)
1. Make a change to the form (to remove the `pristine` flag) and submit the form
1. Dismiss the alert and submit the form a second time
### Expected behavior
Once the alert is dismissed for a second time, the submit button will be enabled (as in the [original example](https://final-form.org/docs/react-final-form/examples/simple)).
### Actual behavior
Once the alert is dismissed the submit button is still disabled, as the `submitting` flag is still `false`. This resets when the form state updates (eg focusing a field, changing a selection), but occurs if the form is submitted again.
### Other information
The example I've provided is trivial and using a synchronous handler would be better practice. However, there are valid use cases for an async handler with conditional async calls - eg
```js
const handleSubmit = async values => {
try {
if (someCondition) {
await someAsyncCall(values);
}
if (otherCondition) {
await otherAsyncCall(values);
}
setSyncState(someValue);
} catch (error) {
setSyncState(someOtherValue);
return { [FORM_ERROR]: "Something went wrong" };
}
};
```
Contributor guide
Assessment
This issue has not been assessed yet.