Disable the submit button after successful submission, until isDirty again

[dandv]

This is a common flow for good form UX:

1. User loads form
2. Until the user changes anything, the SUBMIT button should be disabled, because there are no changes to be submitted
3. Once the user has modified any field (i.e. isDirty becomes true), the SUBMIT button should be enabled
4. After the user clicks SUBMIT (and validation passes and the submission is successful), the SUBMIT button should be disabled again, and the flow goes back to step Run Prettier over Docs?  #2

What is the simplest way to implement this in RHF?

I started this code sandbox and I'm trying to disable the SUBMIT button like this:

<input type="submit" disabled={!isDirty} />

The problem is isDirty stays true even after the form submits. I think that's incorrect, because the fields are no longer dirty because they have been submitted/saved to an API endpoint.

Disabling the SUBMIT button if isSubmitted is true doesn't help after the user submits the form and changes one field again. In that case isSubmitted will be true, but the button should be enabled.

[keiya01]

I think you can use reset. https://react-hook-form.com/api#reset

[dandv]

Thanks! As a hack, reset(getValues()) will work.

This would be simpler if RHF set isDirty back to false after submission. After submission, the fields really are not dirty any more.

[danielo515]

So right now you have to call reset with the new values to set the form back to a non dirty status? Then why are the docs warning against reseting on submit handler??

https://react-hook-form.com/api/useform/reset

[selimb]

For those coming here from google, I think the recommended flow is to call reset in a useEffect, as explained in the reset rules.

useEffect(() => {
  if (isSubmitSuccessful) {
    reset(getValues());
  }
}, [isSubmitSuccessful])

This has worked well for me thus far.

[mikew]

Putting this into an effect just worries me. Let alone the You might not need an effect docs pointing out this isn't a great use of useEffect, it just means the reset could happen when anything else causes the component to re-render.