defaultValue in ArrayInput doesn't update

[gpietro]

What you were expecting: On ArrayInput for each TextInput of type id, I expect with the following:

<ArrayInput
    source="backlinks"
    defaultValue={backlinksDefaultValue}
    validate={[required()]}
>
    <SimpleFormIterator>
        <TextInput
              disable
              label="id"
              source="id"
              defaultValue={React.useMemo(() => v4(), [])}
        />
        <DateInput source="date" label="date" />
        <TextInput source="url" label="url" />
    </SimpleFormIterator>
</ArrayInput>

to get a different defaultValue for each element.

What happened instead: All the elements have the same defaultValue

Steps to reproduce: https://codesandbox.io/s/intelligent-moser-bwvn7

Create a new post -> add Backlinks

[fzaninotto]

That's an interesting feature, and SimpleFormIterator doesn't support it indeed, as it clones the Input components with their props, and at that time, the defaultValue is already evaluated.

We probably need support for this feature by the underlying library, react-final-form-arrays, before we can implement it in react-admin though.

In the meantime, you can switch SimpleFormIterator with your own component.

[panfiva]

I think this issue is the same as #4709

I have tested react-final-form-arrays and it supports default values for child inputs; however default values are removed by useInitializeFormWithRecord function, which is called from FormView function at https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/form/FormWithRedirect.tsx

[fzaninotto]

It's a complementary issue to #4709: even if default values worked inside ArrayInput, there would be no way to have a different default value for each item in the set.

[panfiva]

@fzaninotto, to make sure that default / initial values of array's child elements are supported, we need to somehow exclude array element from function call: https://github.com/marmelab/react-admin/blob/70e9b4889781a5033d424bb13048e1a91a8e2357/packages/ra-core/src/form/useInitializeFormWithRecord.ts#L24

However, we cannot just exclude array elements from the call since such call are needed in many uses cases. As far as I can see, we have 2 options:

• Option 1: Somehow read form initial values on both array and on child fields, and apply them (array first, then child fields later); however, i do not think final-form and react-final-form provide us with a method to query initial values configured on fields.
• Option 2: stop using useInitializeFormWithRecord; This will prevent form refreshes from working properly. This can be fixed by forcing form destruction and then rendering a brand new copy of a form: for example, after a user click refresh, FormWithRedirect should return empty div and then we should trigger another form refresh that returns a form again.

[Maybach91]

In the meantime, you can switch SimpleFormIterator for your own component.

@fzaninotto do you have an example how an alternative / own component could look like to have updated default values for each item?