Skip to content

ArrayInput keeps bringing back removed item when keepDirtyValues is set to true #10420

@slax57

Description

@slax57

What you were expecting:

When the following conditions are met:

  • React Strict Mode is enabled
  • Records are modified by the backend each time they are updated (e.g. to add an updated_at field)
  • <Edit> has redirect={false}
  • <Edit> has mutationMode="optimistic"
  • <Form> has resetOptions={{ keepDirtyValues: true }}

I should be able to remove items from an <ArrayInput>.

What happened instead:

Instead, the removed item keeps reappearing after I click Save.

Screencast.2024-12-18.14.55.42.mp4

Steps to reproduce:

  1. Open https://stackblitz.com/edit/github-ds11wg7c?file=src%2Fposts%2FPostEdit.tsx
  2. Click on Post with id 13
  3. Add a new item
  4. Save
  5. Remove item
  6. Save
  7. Notice the removed item came back!

Related code:

https://stackblitz.com/edit/github-ds11wg7c?file=src%2Fposts%2FPostEdit.tsx

Other information:

I also tried to reproduce this issue in a react-hook-form only sandbox, but it does not seem to have the issue.
https://codesandbox.io/p/sandbox/sweet-rhodes-nn7nl8?workspaceId=ws_GvfcTzCi2aJ7bCaQr5bmfV

Environment

  • React-admin version: 5.4.2
  • Last version that did not exhibit the issue (if applicable):
  • React version: 18
  • Browser: Chrome
  • Stack trace (in case of a JS error):

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions