Form context doesn't reset when the form resets after the id changes

[AMEH64]

Describe the bug and the expected behavior

The docs provides a tip in how to reset the form by modifying the id passed to the useForm hook.

https://conform.guide/api/react/useForm

I have found this useful when navigating to different pages with the same form, however, the form context doesn't reset. This causes fields that subscribe to the context via useField to become out of sync with the form itself.

Conform version

v1.0.6

Steps to Reproduce the Bug or Issue

I created and example repo for reference: https://github.com/AMEH64/remix-spa/tree/2a5426becee6d0992ee354dfb936a9df8975d664

1. Create a new Remix SPA app - https://remix.run/docs/en/main/future/spa-mode
   npx create-remix@latest --template remix-run/remix/templates/spa

2. Install Conform
   npm install @conform-to/react @conform-to/zod

3. Create a new Conform route module
   touch app/routes/conform.\$id.tsx

4. Create a schema for the form within ~/app/routes/conform.$id.tsx

   const schema = z.object({
     input: z.string().min(1).max(25),
   });

5. Create a simple input component, within ~app/routes/conform.$id.tsx, that leverages the useField hook

   function InputField() {
     const [meta, form] = useField("input");
   
     return (
       <fieldset {...getFieldsetProps(meta)}>
         <legend>Form ID: {form.id}</legend>
         <label htmlFor={meta.id}>Enter some text...</label>
         <input {...getInputProps(meta, { type: "text" })} />
       </fieldset>
     );
   }

6. Create the route component, within ~/app/routes/conform.$id.tsx, which leverages the route param within the form id

   export default function Conform() {
     const location = useLocation();
     const params = useParams();
     const [form, fields] = useForm({
       id: `form-${params.id}`,
       shouldValidate: "onBlur",
       shouldRevalidate: "onInput",
       constraint: getZodConstraint(schema),
       onValidate: ({ formData }) => parseWithZod(formData, { schema }),
     });
   
     return (
       <FormProvider context={form.context}>
         <h1>Location: {location.pathname}</h1>
         <h2>Form ID: {form.id}</h2>
         <Form method="POST" {...getFormProps(form)}>
           <InputField />
           <button type="submit" name="intent" value="save">
             Submit
           </button>
         </Form>
       </FormProvider>
     );
   }

7. Create a client action, within ~/app/routes/conform.$id.tsx, which redirects to a new route with the same form

   export async function clientAction({
     params,
     request,
   }: ClientActionFunctionArgs) {
     const formData = await request.formData();
   
     const submission = parseWithZod(formData, { schema });
   
     if (submission.status !== "success") {
       return submission.reply();
     }
   
     invariant(params.id, "missing id param");
   
     return redirect(`/conform/${+params.id + 1}`);
   }

8. Run the app and navigate to ~/conform/1
npm run dev

   

9. Enter some text into the input and submit the form

10. Review the results

    • Expected: The fieldset/input should be associated with the new form

    • Actual: The fieldset/input is not associated with the new form

      

What browsers are you seeing the problem on?

Chrome, Others

Screenshots or Videos

Screen.Recording.2024-04-03.at.10.22.45.AM.mov

Additional context

No response

[AMEH64]

@edmundhung , thank you for taking the time to review this issue and develop a solution.

I installed v1.1.0 and confirmed the issue I reported no longer exists.

https://github.com/AMEH64/remix-spa/tree/7aae41de685006a9eae40ecf6c2af192557b440f

Screen.Recording.2024-04-10.at.5.20.38.PM.mov

[edmundhung]

Thanks for reporting the bug and help verifying it!