marmelab / marmelab/react-admin

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

Open
#10,420 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
26.9k
Forks
5.5k
Avg merge
2d 3h
Merged PRs (30d)
19

Description

**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)
- `` has `redirect={false}`
- `` has `mutationMode="optimistic"`
- `` has `resetOptions={{ keepDirtyValues: true }}`

I should be able to remove items from an ``.

**What happened instead:**

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

https://github.com/user-attachments/assets/a63664e4-7126-48ec-827d-6c700daede27

**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):

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproduction, especially src/posts/PostEdit.tsx, and reproduce the sequence with React Strict Mode, optimistic mutation, redirect={false}, and keepDirtyValues. Trace the interaction between Edit, Form, and ArrayInput after the second save; done means a removed item stays removed under the reported conditions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.