Skip to content
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

useFieldArray doesn't remove correct indexes #4117

Closed
Grandnainconnu opened this issue Feb 5, 2021 · 6 comments
Closed

useFieldArray doesn't remove correct indexes #4117

Grandnainconnu opened this issue Feb 5, 2021 · 6 comments

Comments

@Grandnainconnu
Copy link

Grandnainconnu commented Feb 5, 2021

Describe the bug
I have discovered that after removing 5 indexes, wait for the render, then remove 5 other indexes, this time one of the index will be wrongly removed.

To Reproduce
On CSB: add all the possible attributes on the select field, then remove the two last ones. The first remove will be fine, on the second one, variants should be removed from index 9 to 17, but variant n°2 is removed, and variant n°9 is kept.
(Check console for id's and indexes)

Codesandbox link (Required)
https://codesandbox.io/s/problem-remove-usefieldarray-m8zub?file=/src/App.js

Expected behavior
Elements at indexes should be removed correctly.

Workaround
Using remove in a forEach instead of passing an array of indexes does the work.

Desktop (please complete the following information):

  • OS: Ubuntu 20
  • Browser : Chrome
  • Version : 87.0.4280.66

Additional context
I'm making a form to add products variations, depending on attributes (Sizes, Colors, Cut, etc.), I discovered this bug when testing my migration from formik (it was triggering 30 renders per product variant update) to react-hook-form.

@bluebill1049
Copy link
Member

bluebill1049 commented Feb 5, 2021

  • please supply a reasonable codesandbox for us to reproduce the issue.
  • also useFieldArray is not meant to be used like such in your CSB.

@bluebill1049 bluebill1049 added the status: need more detail Please follow our issue template. label Feb 5, 2021
@cargallo
Copy link

cargallo commented Feb 7, 2021

I'm having issues with remove using index too. It removes others than the clicked one

@bluebill1049
Copy link
Member

I'm having issues with remove using index too. It removes others than the clicked one

hey @cargallo, please supply a codesandbox for me to reproduce the issue.

@cargallo
Copy link

cargallo commented Feb 8, 2021

Hi @bluebill1049 here is the sandbox. Click n times in append and then delete items, it always deletes the last one.

https://codesandbox.io/s/react-hook-form-usefieldarray-forked-b0k18

@bluebill1049
Copy link
Member

@cargallo
Copy link

cargallo commented Feb 8, 2021

Hi, I realize that the problem in my code was that it mandatory to use item.id in the main wrapper of fields. If you set another key it doesn't work. Maybe you can throw an error in that case? Without putting the key in that way it was deleting the last one!

image

https://codesandbox.io/s/react-hook-form-usefieldarray-forked-6urgq

@bluebill1049 bluebill1049 removed the status: need more detail Please follow our issue template. label May 26, 2021
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 12, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants