Form reset, append adds ghost empty fields

[imprakharshukla]

Version Number

7.51.3

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-forms-appenderror-97c7km?file=%2Fsrc%2FApp.tsx%3A813%2C28

Steps to reproduce

1. Click on "Add Inventory" button to append a field after the initial data has been set.
2. Click on "Update Product" and observe the console log.
   The first click logs an empty error object and then the next click suddenly adds about 12 fields in the inventory key.

Expected behaviour

The extra 12 ghost empty inventory fields should not be added.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Edge

Relevant log output

[
    null,
    {
        "variant": {
            "message": "Array must contain at least 1 element(s)",
            "type": "too_small"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    },
    {
        "size": {
            "message": "Required",
            "type": "invalid_type"
        },
        "variant": {
            "message": "Required",
            "type": "invalid_type"
        }
    }
]

Code of Conduct

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

[Rudomitori]

I faced a bug that looks similar to the described here.

I've tried different versions of react-hook-form and found that the bug was introduced in version 7.38.0

[imprakharshukla]

@Rudomitori Just tested versions till 7.32.0 and the ghost fields are still created. Makes me wonder if there's anything wrong with the way I am initialising the form (though I have tired to do it in multiple ways and it still happens).

[bluebill1049]

clean up your codesandbox.

[Rudomitori]

It took some time but I finally managed to reproduce my use case.
Codesandbox

Steps:

1. Click "Append"
2. Enter something into the array fields
3. Click "Reset"
   The array fields disappears
4. Click "Append"
5. Enter something into the array fields
6. Click "Reset"
   Expected: Result is the same as after the step 3
   Actual: The array fields are still there, the first field isn't changed, the second field becomes empty

[erashu212]

@imprakharshukla You can fix this issue by passing
This is happening because of this line

 const onReset = () => {
    reset({}, { keepDefaultValues: true });
  };