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

Async submit handler doesn't reset form state if await operator is not used

Open
#761 3 comments 0 reactions 0 assignees View on GitHub
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

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.