Array input populating existing field values when reordering using conditional form fields

[andypwarren]

I have a form which has an array input, inside there are fields which are displayed conditionally based on a type field. When I add a new item and move it above an existing one, then select the same type as the the one that was previously at that index. It copies the old field values from the item previously at that index to the new one.

What you were expecting: When reordering a new item and selecting the type I expect the fields not to be populated with any data.

What happened instead: Fields were populated with existing data from the item previously at that index

Steps to reproduce: I have created a stackblitz to reproduce the issue Application Code

1. Add a new card to the array
2. Move the card up above the existing editorial card
3. Select the editorial type (same as the card that was at this index before)
4. Observe the field value from the card that was previously at that index is injected into the new field

Here's a video to demonstrate

https://user-images.githubusercontent.com/8376300/194025927-3e097199-8396-46cf-9ad8-7a0a7729d427.mov

Related code: https://stackblitz.com/edit/react-c8qwgj?file=src/App.js Here is the edit form I'm using

<Edit {...props}>
  <SimpleForm>
    <ArrayInput source="cards">
      <SimpleFormIterator>
        <SelectInput source="type" label="Card type" choices={types} />
        <FormDataConsumer>
          {({ scopedFormData, getSource }) => {
            if (!scopedFormData || !getSource) {
              return null;
            }
            switch (scopedFormData.type) {
              case 0:
                return (
                  <>
                    <TextInput
                      source={getSource("product.id")}
                      label="id"
                    />
                  </>
                );
              case 1:
                return (
                  <>
                    <TextInput
                      source={getSource("editorial.title")}
                      label="title"
                    />
                  </>
                );
              default:
                return null;
            }
          }}
        </FormDataConsumer>
      </SimpleFormIterator>
    </ArrayInput>
  </SimpleForm>
</Edit>

Environment

• React-admin version: 4.4.0 also exists in 3.19.10
• React version: 18.2.0
• Browser: Chrome Version 106.0.5249.91 (Official Build) (arm64)
• Stack trace (in case of a JS error): N/A

[WiXSL]

Reproduced! Thanks for the report

[djhi]

Can't reproduce anymore