Updating multiple fields doesn't work after it has a value

[nphmuller]

Describe the bug and the expected behavior

A form has a 2 text input fields and a button with the Update intent that updates multiple fields.
The update button works when a field doesn't have a value yet. But it doesn't update the field when it already has a value.

Conform version

v1.1.0

Steps to Reproduce the Bug or Issue

You can also click this link and skip step 1-3: https://stackblitz.com/edit/stackblitz-starters-aekwz8?file=app%2Fpage.tsx

1. npx create-next-app@latest
2. npm i @conform-to/react @conform-to/zod zod
3. Replace /app/page.tsx with this code:

import { getFormProps, getInputProps, useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import { z } from "zod";

export default function Home() {
  const [form, fields] = useForm({
    onValidate: ({ formData }) =>
      parseWithZod(formData, {
        schema: z.object({
          name: z.string(),
          message: z.string(),
        }),
      }),
  });

  return (
    <div>
      <form {...getFormProps(form)}>
        <div>
          <label htmlFor={fields.name.id}>Name</label>
          <input {...getInputProps(fields.name, { type: "text" })} />
        </div>
        <div>
          <label htmlFor={fields.message.id}>Message</label>
          <input {...getInputProps(fields.message, { type: "text" })} />
        </div>
        <button
          {...form.update.getButtonProps({
            value: {
              name: "updated",
              message: "updated",
            },
          })}
        >
          Update
        </button>
      </form>
    </div>
  );
}

4. Click the Update button
5. Both inputs now show the value "updated".
6. Refresh the page (inputs should be empty now)
7. Enter a value in input 1
8. Click the Update button

Expected:
Both inputs should show the value "updated".

Actual:
Only the 2nd input show the value "updated".

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari

Screenshots or Videos

No response

Additional context

It seems the key prop doesn't get updated when updateing multiple fields at the same time.
If I add these lines the key prop keeps getting logged as undefined.

  console.log("!!!! 1", fields.name.key);
  console.log("!!!! 2", fields.message.key);

[edmundhung]

Thanks for the bug report. Looks like the issue only happens on the root as updating a specific field works properly.

[edmundhung]

This is fixed in v1.1.3.

[nphmuller]

Thank you so much. I always learn a lot by viewing the changes you make to fix these kind of issues, so I really appreciate it. I also love how easy it is to tinker around via the playground project.