Nested useFieldArray - watch values become undefined after moving items

[johncalvinroberts]

Describe the bug
When using the move function from useArrayField in conjunction with watch, the watched values return as undefined after calling move.

To Reproduce
Steps to reproduce the behavior:

1. Go to the codesandbox link
2. Click on append 3 times to add a total of 4 items
3. View "preview values" accessed by watch below the array field, will show the value of all 4 items
4. Press the "move" button to move items 2 and 4
5. View "preview values" again - 2, 3, and 4 are all returning as undefined from the watch function

Codesandbox link
https://codesandbox.io/s/react-hook-form-usefieldarray-u1bmc?fontsize=14&hidenavigation=1&theme=dark

Expected behavior
watch should return the up-to-date values, not undefined.

Additional context

Caveat: this only is reproducible if the values are added to the array, i.e., the array items are appended/added to the array, not supplied by defaultValues.

P.S. Still really digging this library, big fan :)

[bluebill1049]

Hey @johncalvinroberts thanks for the kind words ❤️ have you tried watch the entire array field? watch(test)

I will take a close look at your issue soon.

[bluebill1049]

I think the probably can be solved by just watching the entire field array: watch('test')

The challenge i had with useFieldArray with uncontrolled inputs is value gets set during the render phase instead reading from local state. so i made a fix to make watch work if you want to watch the entire field array, let me know if this resolve your problem.

[bluebill1049]

Did u try with the above suggestion?

[johncalvinroberts]

@bluebill1049 I did try with the above suggestion, and unfortunately it wasn't solving the issue for me...I tried to create a codesandbox reproduction of that bug as well, but couldn't reproduce in codesandbox.

In my particular case: I ended up using the old react-hook-form array style (manually manage indexes) and I got around my problems that way. It did help how you explained that the values get set to the ref during the render phase, so thanks for that!

Potentially related: in my particular use case, one of the names in each array item is manually managed (no input ref, just register({name} and then setValue). This seemed to cause a bunch of issues with the useArrayField hook. I need to understand useArrayField a bit more to understand why this would cause problems.

[bluebill1049]

Potentially related: in my particular use case, one of the names in each array item is manually managed (no input ref, just register({name} and then setValue). This seemed to cause a bunch of issues with the useArrayField hook. I need to understand useArrayField a bit more to understand why this would cause problems.

Good point, i should update the docs to reflect that, you can't use custom register with useFieldArray, if you have external component, please use Controller instead.

[bluebill1049]

Going to close this issue and update accordingly on the website.