useFieldArray does not use values given to useForm

[Cielquan]

Hi all,

in my application I have a complex form structure or more like multiple not too complex forms on different tabs and so on.

After submitting one of the forms:

1. The data gets saved in external state management (a big jotai atom)
2. The form is hidden (via CSS display: none)
3. A text-summary of the form's values (then coming from the atom) is shown
4. A button to edit the data is also shown

When you press the "Edit" button afterwards:

1. The summary is hidden
2. The form is shown again
3. The form gets the current values (from the jotai atom) passed via the values parameter of useForm, which works fine for "normal" form fields like materialName in the example. On the other hand the field-array does not get the values. When you press the Append layer button a new layer is added, but also the layer from the values is finally shown before the new layer. I noticed that the whole form is rendered twice: First with the defaultValues and then with the values.

CSB example: https://codesandbox.io/p/sandbox/youthful-forest-45pv2d?file=%2Fsrc%2FApp.tsx%3A9%2C12

I am unsure if this is related to #12049.

Is this a bug or working as intended, and if so how can I achieve my goal, that the array fields are shown after clicking the Edit button or in the example case on initial render?
I hope someone can shed some light on this. 🙏🏾

If you need further information I will be happy to provide them.

[ja1za1]

Did you manage to fix this or maybe any workaround? I'm having this same problem and I don't know how to fix it.

[Cielquan]

I unfortunately have no solution. Only an IMO dirty hack-around.

The field array does not receive the given start data initially but after e.g. a layer is added. A useEffect can be used, which calls the update method of the field array and sets the first item/layer manually with the data of the first layer from the form if any.

A simplified snippet from my code base. Maybe that helps:

const layerFields = useFieldArray({ name: "layers", control: form.control });

useEffect(() => {
  const firstLayer = form.getValues("layers")[0];
  if (firstLayer !== undefined) layerFields.update(0, firstLayer);
}, [form, layerFields]);