issue: append or delete creates duplicates while using react-virtuoso

[calcifer9000]

Version Number

7.53.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/fieldarraytablevirtuoso-forked-qp5n2q

Steps to reproduce

1. Go to codesandbox
2. Click Append button twice. This should correctly add two new inputs
3. Click Delete on the 2nd. This should correctly delete it
4. Click Delete on the last one. This will NOT delete it [issue]
5. Click Delete again. It will finally delete.
6. Click Append again. Two inputs get added. instead of one [issue]
7. See error

Expected behaviour

It should not be duplicating an append. It should not require multiple deletion to delete an input

Note: Change react-hook-form version to 7.0.5 and the issue goes away. I do not know where the issue starts.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[calcifer9000]

Tested a few other versions up to 7.12.0. Issue is not there.
7.13.0 and over, the issue reproduces

[OlegDev1]

I have tested various versions. This issue appears on version 7.13.0-next.0. On version 7.12.2 and below everything works as expected. Here is the commit that caused the issue a4b2c0a, i guess changes to useFieldArray caused it. For example, append and remove methods were changed (control and keyName added)

react-hook-form/src/useFieldArray.ts

Lines 301 to 302 in a4b2c0a

	append: React.useCallback(append, [name, control, keyName]),
	remove: React.useCallback(remove, [name, control, keyName]),

[bluebill1049]

if you could provide an example of the issue with native input without external dependency or test case without the external lib dep.

[Amazing512]

@calcifer9000 For now, you can try the workaround discussed here, probably same issue:
https://github.com/orgs/react-hook-form/discussions/9496

[Amazing512]

I have tested various versions. This issue appears on version 7.13.0-next.0. On version 7.12.2 and below everything works as expected. Here is the commit that caused the issue a4b2c0a, i guess changes to useFieldArray caused it. For example, append and remove methods were changed (control and keyName added)

react-hook-form/src/useFieldArray.ts

Lines 301 to 302 in a4b2c0a

	append: React.useCallback(append, [name, control, keyName]),
	remove: React.useCallback(remove, [name, control, keyName]),

The issue appearance also makes sense considering the explanation @leapful provided. Seems to be an issue involving react-virtuoso logic and controlled components

[calcifer9000]

@calcifer9000 For now, you can try the workaround discussed here, probably same issue: https://github.com/orgs/react-hook-form/discussions/9496

This is actually the source of my forked codesandbox, where it is working because of version 7.0.5. The workaround in this codesandbox is not necessary, they simply weren't using react-virtuoso correctly with react-hook-form. They just have to add ComputeItemKey, and their workaround is no longer necessary, nor did the workaround actually work, as to why I came to conclusion that it was a version issue.

[Amazing512]

@calcifer9000 For now, you can try the workaround discussed here, probably same issue: https://github.com/orgs/react-hook-form/discussions/9496

This is actually the source of my forked codesandbox, where it is working because of version 7.0.5. The workaround in this codesandbox is not necessary, they simply weren't using react-virtuoso correctly with react-hook-form. They just have to add ComputeItemKey, and their workaround is no longer necessary, nor did the workaround actually work, as to why I came to conclusion that it was a version issue.

The workaround really didn't work correctly in version 7.0.5, but seems to work on newer versions like 7.53.2; I created a codesandbox to demonstrate: https://codesandbox.io/p/sandbox/fieldarraytablevirtuoso-forked-cmlg7h

Still, as you said, I don't think it can be considered a correct implementation of react-virtuoso with react-hook-form, that's why I called it a workaround;