marmelab / marmelab/react-admin
`ArrayInput` keeps bringing back removed item when `keepDirtyValues` is set to `true`
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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