issue: Cannot move item in fieldArray which has its own fieldArray

[pyramid-scheme-ceo]

Version Number

7.43.9

Codesandbox/Expo snack

https://codesandbox.io/s/heuristic-meadow-pkvtcd?file=/src/App.tsx

Steps to reproduce

In the provided sandbox I've built a nested, dynamic form with three possible "things" you can add to the form:

• Standalone questions: - questions which appear at the base of the form
• Sections: a container for related questions, each section has it's own fieldArray of question form objects, but does use the parent formContext so that it's all part of the same form.
• Nested questions: questions which appear within a section

The real form I work with has a lot more to it, but this is the minimum code required to reproduce the error, which occurs when re-arranging the items within the form.

To reproduce the error:

1. Click "Add question" to add a standalone question
2. Click "Add section" to add a section
3. Click "Add nested section" to add a question within the section created in step 2
4. Click "Up" to move the section above the initial standalone question
5. At this point, the page will crash

Expected behaviour

In the sample app, the section should be moved above the standalone question.
This worked in V6 and has only become an issue since we upgraded to V7.

What browsers are you seeing the problem on?

Firefox, Chrome, Edge

Relevant log output

TypeError: Cannot set properties of undefined (setting 'mount')
t
https://pkvtcd.csb.app/node_modules/react-hook-form/dist/index.cjs.js:1:3990

Code of Conduct

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

[leapful]

@pyramid-scheme-ceo

react-hook-form v7 is targeting on field level handling while your field name is still using object data and it polluted the field array object (your items.$index will be overridden by items.$index.questions.$index.

Just use directly field name item.$index.name and item.$index.questions.$index.name will solve the issue.

Working demo: https://codesandbox.io/s/naughty-christian-ltg39g?file=/src/App.tsx

[pyramid-scheme-ceo]

Ah legend, thanks for the suggestion!

[pyramid-scheme-ceo]

Fixed, but the fields I have from the example (e.g. questions, sections) have a lot more attributes than just name -- so I just wrapped everything in a containing object such as { value: Question } | { value: Section }, then I can reference it using item.$index.value and it appears to all work as it should :)