marmelab / react-admin

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
http://marmelab.com/react-admin
MIT License
24.89k stars 5.23k forks source link

Removing an item from an ArrayInput with primitive values and validation removes more than one input #9905

Closed k4v1cs closed 3 months ago

k4v1cs commented 4 months ago

What you were expecting: Removing an item should only remove that one item

What happened instead: When empty inputs are present removing an item removes other items as well

Steps to reproduce: Have an ArrayInput with string values. The array and values are validated as required. Sandbox: https://codesandbox.io/p/devbox/arrayinput-remove-item-issue-sx4zky?file=%2Fsrc%2FApp.tsx%3A25%2C26&workspaceId=03aee9bf-4bf8-480d-97ef-9f80cfaf967b

Steps 1:

  1. Open edit view
  2. Add a new item, leave it empty
  3. Try to save the form, validation errors will appear
  4. Click on the remove button of the first item

Expected result:

  1. Only the first item should be removed Actual result:
  2. The first and the last, invalid and empty item was removed, the validation error from the whole array still remained

https://github.com/marmelab/react-admin/assets/4885562/624fb9fb-4b24-4d56-a7ac-3fabbefb9676

Steps 2:

  1. Open edit view
  2. Add a new item, leave it empty
  3. Remove the value of the second item
  4. Click on the remove button of the first item

Expected result:

  1. Only the first item should be removed

Actual result:

  1. One empty input the third item remained, the other empty input and fourth item was also removed

https://github.com/marmelab/react-admin/assets/4885562/1b0e9877-124d-4c36-a805-1b0078b0a9ca

Related code:

<SimpleForm>
      <ArrayInput source="names" validate={required()}>
        <SimpleFormIterator>
          <TextInput source="" validate={required()} />
        </SimpleFormIterator>
      </ArrayInput>
</SimpleForm>

Environment

fzaninotto commented 4 months ago

I haven't tried reproduction yet, but keep in mind that using ArrayInput for scalar values is an edge case in which we won't spend much time. We recommend using AutocompleteArrayInput or SelectArrayInput instead.

slax57 commented 4 months ago

reproduced, thanks