Today I Learned

This project exists to catalogue the sharing & accumulation of knowledge as it happens day-to-day. Posts have a 200-word limit, and posting is open to any Rocketeer as well as selected friends of JetRockets. We hope you enjoy learning along with us.

Reset values in React Final Form w/ keepDirtyOnReinitialize

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>
}/>
Looking for help? At JetRockets, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.