Swapping w/ nested field arrays leads to crash

[fadi-george]

Version Number

7.33.1

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-js-forked-mootdl?file=/src/App.js

Steps to reproduce

Click the first swap button, it breaks the app. Second/third swap buttons work fine.

But if you comment out the default values, then it will work if you:

• Press add button twice
• Click the second make group button
• Click the first swap button

Expected behaviour

Swap should work with nested fields with or without default values being set

What browsers are you seeing the problem on?

Chrome

Relevant log output

From my own app:

updateMounted
src/useController.ts:81
  78 |   const field: Field = get(control._fields, name);
  79 | 
  80 |   if (field) {
> 81 |     field._f.mount = value;
     | ^  82 |   }
  83 | };
  84 | 

Code of Conduct

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

[bluebill1049]

thanks for the issue report, please check if you have registered both inputs, which are value and operator inputs. useFieldArray fields are not optional they should both be registered, this runtime error reveals that the input is not registered and mounted. we can patch or prevent this error, but this would potentially lead to other unexpected behavior.

[fadi-george]

Spreading field ({...field}) also doesn't help.

[fadi-george]

Alt version w/ Controller: https://codesandbox.io/s/group-3-kxg6gw?file=/src/ValueRow.js

[bluebill1049]

In fact, a controlled component got registered without a mounted attribute, it's a sign of misusage. Can you provide both input defautlvalues and also make sure both inputs get registered?

[bluebill1049]

This a good example to be based on as well: https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn

[fadi-george]

Ah right, I could split in to multiple useController dont need refs either: https://codesandbox.io/s/group-2-1-rloszt?file=/src/ValueRow.js