How to reset values with keepDirtyOnReinitialize in React Final Form after submitting.
The Issue
If keepDirtyOnReinitialize is applied to your form, then form.reset() no longer able to remove field's value.
The Solution
The Solution is simple— if the form submitted successfully: first change keepDirtyOnReinitialize to false -> perform form reset form.reset() -> and change keepDirtyOnReinitialize back to true.
<Form
onSubmit={onSubmit}
keepDirtyOnReinitialize
render={({ handleSubmit, form }) => (
<form
onSubmit={(event) => {
const promise = handleSubmit(event);
promise && promise.then(() => {
form.setConfig('keepDirtyOnReinitialize', false);
form.reset();
form.setConfig('keepDirtyOnReinitialize', true);
})
return promise;
}}
>
...
</form>
}/>
Top comments (0)