CODEWITHSUNDEEP
javascriptreactjsformsreact-final-form
Ishan Patel
Ishan Patel

Reputation: 6091

How to prevent React-Final-Form to reset the form values after user submits the form?

I am using react-final-form in React App. It's working great!

But is there any way to prevent the react-final-form from resetting the input values of the form after user successfully submit the form.

Reason why I need it because, currently when the user is redirected after submitted the form, user see input values being reset to initial form values for 200-400 micro second between the action of submitting the form and redirecting to other component.

I tried using following but didn't work:

e.preventDefault();

return false;

Following is the function that handles the form submission.

export const useCreateAgent = (
  onCompleted: () => void,
) => {
  const [createAgent] = useMutation(CREATE_AGENT, {
    onCompleted,
  });

  return useCallback(async (agent: IAgent) => {
    try {
      await createAgent(createVariables({ ...agent }));
    } catch (errors) {
      return errors;
    }
  }, [createAgent]);
}

Upvotes: 5

Views: 4534

Answers (2)

Ishan Patel
Ishan Patel

Reputation: 6091

keepDirtyOnReinitialize prop fixed that issue. 

<Form keepDirtyOnReinitialize >
   ...
</Form>

Upvotes: 12

benji2505
benji2505

Reputation: 106

If it is just a question about the looks between submission and new page:

event.persist() prevents React from resetting the event object.

Upvotes: 0

Related Questions