Adding an item to ArrayInput on Edit after removing one brings back the same item that was removed

What you were expecting: Removing an item from ArrayInput should really remove it.

What happened instead: After removing an item and adding a new one, the previosuly removed item is back.

Steps to reproduce: Start here: codesandbox.io/s/happy-germain-877ypu

1. Create a new post using the floating + button in bottom right, fill in the required fields and make sure it has a backlink added. Click on Save and edit.
2. When Edit view has opened, click on “Miscellaneous” tab to edit backlinks.
3. Remove the backlink.
4. Add a backlink.
5. Observe, the backlink you previosly removed is now back. I have added a video for clarification:

https://user-images.githubusercontent.com/20572374/158165800-91da4c4c-47c9-438b-a847-ad27ea0c1010.mp4

Other information: There is a workaround which fixed the problem for me:

const AddItemButton = ({ onClick, ...rest }: ButtonProps) => {
  const { change, getFieldState } = useForm();
  return (
    <Button
      label="ra.action.add"
      {...rest}
      onClick={(e) => {
        const fieldState = getFieldState("formArrayFieldSource");
        const nextIndex = fieldState?.value && Array.isArray(fieldState.value) ? fieldState.value.length : 0;
        onClick && onClick(e);
        change(`formArrayFieldSource[${nextIndex}]`, {
          ...getEmptyArrayItem()
        });
      }}>
      <AddCircleOutlineRoundedIcon />
    </Button>
  );
};

where getEmptyArrayItem is a function which returns an empty array item, such that it doesn’t have any undefined members. The idea behind it is to manually make sure the newly added array item is really new.

Environment

• React-admin version: 3.19.10 (tried with 3.19.3 too but locally, same problem)
• Last version that did not exhibit the issue (if applicable): N/A
• React version: 16 locally, but the sandbox uses 17
• Browser: Chrome latest

[slax57]

I tried running the project locally to be sure it’s not a problem caused by codesandbox. I reproduced the issue both with the latest v3 (react-admin@3.19.11 and @material-ui/core@4.12.3) and also with v4 (react-admin@4.0.0).

[djhi]

So this happens because we don’t provide the values for the new item as explained in react-hook-form documentation.

I can only think of two solutions for this, probably complementary:

• We add a newItemData prop to the ArrayInput that will be passed to the append function
• We inspect children to get their defaultValue prop. I don’t like this as we try to avoid inspecting children since v4 as it has proven to often be problematic.

Open to suggestions.