Form submission all in the same route and isDirty

[caprica]

I am having some trouble understanding how to deal with a dirty form after submission.

In a route I have:

• a Form with default values
• an input where I change the value, so the form state changes isDirty to true
• it submits to an action in the same route
• the action returns null
• the loaders execute
• the page updates with new default values for the form, I check them via the getValues form method

(Tthere are no redirects or route changes.)

BUT, the form still reports isDirty = true.

If I invoke reset on the form in response to a change in the isSubmitSuccessful form state, the inputs reset to the previously unchanged values, which is not what I want.

If I add a useEffect with a dependency on the default values, it DOES reset the form and the dirty status, but there is a momentary flash of it changing first to the old values, which is not nice from a UX perspective, and this seemed like a hack tbh.

I suppose I expected that the new default values would trigger the form to reset, since in principle the form values now match the values in the inputs. It seems like the form inputs are somehow not quite in sync with the new default values, even though they appear to be the same.

Anyone has any suggestions or a pointer to a similar example?

This is similar to, but not the same as, #60 and #62.

[caprica]

In theory, this is supposed to work at least with react-hook-form, by keeping the submitted values when reset() is later invoked:

const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isDirty, isSubmitSuccessful },
} = useRemixForm<Inputs>({ resolver, defaultValues: data.formData, resetOptions: { keepValues: true } })

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

But that does not work for me with remix-hook-form, reset() will result in the original values being restored.

This was the only way I could get the behaviour I want, using getValues() in conjunction with reset():

const {
    register,
    handleSubmit,
    reset,
    getValues,
    formState: { errors, isDirty, isSubmitSuccessful },
} = useRemixForm<Inputs>({ resolver, defaultValues: data.formData })

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

(ref: react-hook-form/react-hook-form#3097 (comment))

[caprica]

Added a sandbox here: https://codesandbox.io/p/devbox/silly-jepsen-gzp9mr

[theskillwithin]

this should be an issue?