Inserting new item in field list clears the values of the previous list item

[joejemmely]

Describe the bug and the expected behavior

Inserting a new item in field list clears the values of the previous list item.

To illustrate the bug, here's an example of a simple UI for adding variables to multiple environments.

Using a deeply nested schema like:

const schema = z.object({
  environments: z.array(
    z.array(
      z.object({
        name: z.string(),
        description: z.string(),
        value: z.string(),
      })
    )
  ),
});

Inserting a new environment clears the values of the previous environment when defining defaultValue as follow:

<button
  {...form.insert.getButtonProps({
    name: fields.environments.name,
    defaultValue: [{ name: "", description: "", value: "" }],
    )}
>
  Add environment
</button>

The same thing happens when inserting a new variable within an environment.

The expected behavior is that values previously entered are persisted when a new list item is inserted.

Conform version

v1.1.5

Steps to Reproduce the Bug or Issue

Sandbox: https://stackblitz.com/edit/remix-run-remix-7ybrqe?file=app%2Froutes%2F_index.tsx

1. Go to https://stackblitz.com/edit/remix-run-remix-7ybrqe?file=app%2Froutes%2F_index.tsx
2. Add a an environment by clicking on Add environment
3. Fill in values for name, description, and value for the newly created environment
4. Add a new environment by clicking on Add environment
5. Values from step 3 have been cleared. The expected behavior is that values from step 3 are persisted.

Alternatively:

1. Go to https://stackblitz.com/edit/remix-run-remix-7ybrqe?file=app%2Froutes%2F_index.tsx
2. Add a an environment by clicking on Add environment
3. Fill in values for name, description, and value for the newly created environment
4. Add a new variable by clicking on Add variable
5. Values from step 3 have been cleared. The expected behavior is that values from step 3 are persisted.

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari, Others

Screenshots or Videos

No response

Additional context

No response

[marcomuser]

Might have something to do with your nested array data structure. I would have expected it to have a nested object for the variables. Something like this:

const schema = z.object({
  environments: z.array(
    z.object({
      variables: z.array(
        z.object({
          name: z.string(),
          description: z.string(),
          value: z.string(),
        })
      ),
    })
  ),
});

Not sure if that is the issue but I have a suspicion that this is why it is not able to keep track of the keys in your form when inserting a new entry.