Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
slax57 opened this issue Dec 18, 2024 · 1 comment

Comments

@slax57
Copy link
Contributor

slax57 commented Dec 18, 2024

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):
@ghadabezine
Copy link
Contributor

I can confirm this bug in my environment:

  • React-admin version: 5.4.2
  • React version: 18.2.0
  • Browser: Chrome 120.0.6099.130
  • OS: Windows 10

I've tested this with the following configuration:

  • React Strict Mode enabled
  • Backend modifying records on update (adding updated_at)
  • Edit component with redirect={false} and mutationMode="optimistic"
  • Form with resetOptions={{ keepDirtyValues: true }}

The issue occurs specifically when:

  1. Adding a new item to the ArrayInput
  2. Saving the form
  3. Removing an item
  4. Saving again

The removed item reappears after the save operation, which is unexpected behavior.

Additional observations:

  • The issue doesn't occur in a standalone react-hook-form implementation
  • The problem seems to be related to the optimistic update handling in combination with the backend modifications
  • The issue persists even with different array item structures

Potential workaround:
Temporarily disabling Strict Mode or using mutationMode="pessimistic" seems to prevent the issue, but these aren't ideal solutions.

This appears to be a regression in the optimistic update handling when combined with backend record modifications. The issue might be related to how the form state is being reset or how the optimistic updates are being reconciled with the server response.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants