Remove is not working with nested field arrays on 6.15.2 and above

2 thoughts on “Remove is not working with nested field arrays on 6.15.2 and above”

1. @Elia-Darwish @bluebill1049

   It seems the root cause is from line 511 in useFieldArray.ts, not from #4172.

   react-hook-form/src/useFieldArray.ts

   Lines 506 to 512
   in
   c67d145

   	return () => {
   	isUnMount.current = true;
   	shouldUnregister && remove();
   	resetFields();
   	delete resetFunctions[name];
   	unset(fieldArrayValuesRef, name);
   	fieldArrayNames.delete(name);

   It should be

   unset(fieldArrayValuesRef.current, name);
   

   But fixing this line it’s not enough because it will lead into another issue where “fieldArrayValuesRef.current” after appending new item is something like:

   {
      children: [{ ...First added item }]
   }
   
   

   When removing that item, with the name is “children[0].nested” in this case, the method “unset” from utils/unset.ts only removes item reference by using native method “delete” therefore array “children” will be empty but its length is still 1. It will lead into undefined error when trying to add child again because position “0” is now undefined and the new added item will be at position “1”.

   {
     children: [ undefined, {... Second added item }]
   }
   

   react-hook-form/src/utils/unset.ts

   Line 53
   in
   c67d145

   previousObjRef ? delete previousObjRef[item] : delete object[item];

   @bluebill1049 : Can we use Array.prototype.splice() if the target object to be unset is an array ?

2. @bluebill1049 @Elia-Darwish

   PR is created at #4262

   We don’t need to correct unset 😀 It’s my mistake to not correct the nest child in the CSB sample.