How to avoid reseting the form after succesfull submission

[yaldram]

Hey everyone, I'm working on an app that supports optimistic UI. I want users to submit a form and keep adding new records without the form resetting after each submission. My backend takes about 3 seconds to process. So, after a user adds a record, I show them an optimistic version and they continue adding more. However, after the 3 seconds it takes for the submission to succeed, the form resets. How can I prevent this reset? Thanks!

[yaldram]

@edmundhung sorry to tag you, any solutions here, thanks 🙏

[edmundhung]

Conform does not reset the form by default. It will reset the form only if you call form.reset() in the form or submission.reply({ resetForm: true }) in the action. If you are still unsure about your case, please share a codesandbox or stackblitz that reproduce your issue.

[yaldram]

Thanks for your answer, I was returning this payload after a successful operation -

return {
    status: "success",
    actionType,
  } as SubmissionResult & { actionType: string };

I think this might be causing this reset but now the form is not resetting after I return -

return {
    actionType,
    ...submission.reply({ resetForm: false })
 } as SubmissionResult & { actionType: string };

[dqn]

@edmundhung In Next.js v15, it seems to always reset the form even though I have resetForm set to false.

Next.js v15 is still unstable, and I cannot determine whether the bug is in conform or Next.js, so I will not create an issue.

reproduction:
https://github.com/dqn/conform-always-reset-fields-after-submission-next-v15

[edmundhung]

This is likely because of react 19 automatically reset the form after action completes. I haven't had a chance to test this out yet but I was expecting it to work fine with conform because of our progressive enhancement setup. If it doesn't work, I guess react is triggering a form reset event as well in which Conform understands it as resetting the form state completely and ruined the behaviour 😅

This seems to be the only workaround to opt out from the automatic form reset behaviour. Maybe you can give it a try and let me know how it goes.

[edmundhung]

Something like this:

export function Example() {
  const [form, fields] = useForm({
    lastResult,
    onSubmit(event, { formData }) {
      event.preventDefault();

      startTransition(async () => {
        await action(formData);
      })
    } 
  })
}

[dqn]

Got it, that worked as expected. Thank you 😊

[ttmachado]

Instead of trying to prevent React from clearing the form why would we not use fields.<fieldName>.value as the defaultValue/defaultChecked prop value before fields.<fieldName>.initialValue?

e.g. defaultValue={fields.<fieldName>.value ?? fields.<fieldName>.initialValue}

This would get the previous value if it exists or fallback to the initialValue passed to the form. Am I missing any side effects that might be introduced by this approach?

[edmundhung]

I have had a chance looking into this last week but it is still unclear to me what is a proper solution. There are a few issues I see right now:

• Performance: Doing this will literally makes your form re-render on every keystroke.
• File input: React does not support defaultValue with file inputs. There is no easy way to make sure file persists on form submission.
• Reset cursor position: It is not uncommon that you might want to submit the user input as a draft. But React is now resetting the form as you type including the cursor position 😅