react-hook-form: Problems with Field Array when used with react-beautiful-dnd

Describe the bug I am facing an issue with Field Arrays when the used alongside with the react-beautiful-dnd. I am trying to achieve drag and drop with the Field Array. But there is an issue that while dragging and dropping the field key of a Controller component within the field array is removed.

To Reproduce Steps to reproduce the behavior:

Go to ‘https://codesandbox.io/s/modern-shape-6v9d6?file=/src/App.js’
Drag first point down to the second point
Click on the debug button which calls getValues()
You can see that the 0th element of the Field Array has lost the Address key which is Controller Component

Codesandbox link (Required) https://codesandbox.io/s/modern-shape-6v9d6?file=/src/App.js

Expected behavior Field key of Controller component should not get removed after drag and drop completed. A clear and concise description of what you expected to happen.

Additional context

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 22 (11 by maintainers)

Commits related to this issue

fix #1500 controller with useFieldArray during swap — committed to react-hook-form/react-hook-form by bluebill1049 4 years ago
fix #1500 controller with useFieldArray during swap — committed to react-hook-form/react-hook-form by bluebill1049 4 years ago

Most upvoted comments

Thanks for the prompt replies @bluebill1049 I understand. I will look into it further

FatehAK on Apr 26, 2020

5.6.1-beta.1

bluebill1049 on Apr 27, 2020

Exactly swap/move work fine for uncontrolled inputs. I don’t get it either. Can you have a looksie when you got time?

FatehAK on Apr 27, 2020

On further investigation, I found that this is isn’t a DnD issue at all. There is an issue with the swap and move methods calling them to swap the fields and then calling getValues() later on button click seems to afffect the Controller components(their key is removed) and then key gets added back on any subsequent field change.

Please checkout this sandbox: https://codesandbox.io/s/magical-meninsky-s0y70?file=/src/Panel.js I’ve removed all DnD related code to focus on just that. To demonstrate please enter values in the two fields and click on swap. Then click on debug to print the values, you can see that the Address key is lost on the 0th element

FatehAK on Apr 26, 2020