issue: useFieldArray replace function breaks on version 7.45.1

[maiyaacovi]

Version Number

7.45.1

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-usefieldarray-forked-kv8ps5?file=/src/index.tsx

Steps to reproduce

1. Go to codesandbox attached
2. Click on 'replace'
3. See that the first item is not replaced, only the second item is added.

The 'replace' function should replace all the fields in the array, but we can see that its not affecting existing fields. For example, if I have array of two fields, and I replace them with two different fields, it won't replace. If I replace them with three different fields, only the third one is added.

On codesandbox I used version 8.0.0-alpha.4 since there was no version 7.45.1, but its the exact same bug that happens to me with version 7.45.1.

Thanks!

Expected behaviour

fields should now be 'test1' and 'test2'

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

[leapful]

@maiyaacovi

Please re-check your code base to see if prop keyName is used for useFieldArray to change auto generated unique identifier of fields object.

In your codesandbox url https://codesandbox.io/s/react-hook-form-usefieldarray-forked-kv8ps5?file=/src/index.tsx, it was using react-hook-form 8 alpha version where default key name is key, not id that leads to wrong update node on React re-rendering.

I've checked version 7.45.1 and it seems working normally: https://codesandbox.io/s/react-hook-form-usefieldarray-forked-s92kxz?file=/src/index.tsx:2783-2790

[maiyaacovi]

Hey, thanks for the answer!
I understand what you mean, but we actually do pass the id to the inputs as a key (and the field is 'id' not 'key')..
I guess it is something in our implementation, but it would be very helpful if you could check what maybe changed in this area between these two versions, since in the last version we had (7.44.3) it was working perfectly. We looked in the changelog but nothing there seemed relevant..

[leapful]

@maiyaacovi

There is no change on prop "key" of useFieldArray hook on react-hook-form version 7.45.1. Like I already mentioned in the previous comment, I used your codesandbox url then switch to latest react-hook-form 7.45.1 and it works perfectly, you can check it here: https://codesandbox.io/s/react-hook-form-usefieldarray-forked-3r9wyy

I would suggest you to check your node_modules to see if react-hook-form is correctly in version 7.45.1 or not. Sometime, in mono repo, the dependency lock file (yarn.lock or package-lock.json) might be updated from other module and causes wrong version.

[maiyaacovi]

We are on the correct version.
What i meant is if something was changed in the area of the 'replace' function

[leapful]

@maiyaacovi

There is no change on replace function between 7.44.3 and 7.45.1. You can check it here v7.44.3...v7.45.1

Unless you can provide a codsandbox url to re-produce the issue, otherwise, I would recommend to put more debug log on the mapping of fields object to see if there is any conflict on id value that is used to put on prop key because the root cause of wrong re-rendering elements is mostly caused by duplicated or missing unique identifier.

[Abdul007Malik]

I am facing the same issue in 7.45.1, when I revert it to 7.45.0. It works fine. In subsequent renders the onChange value is gone.

const { replace } = useFieldArray({ control, name: 'tags' });

return (
    <Controller
      name='tags'
      control={control}
      render={() => (
        <FormControl fullWidth>
          <CustomFormLabel text={label} />
          <Autocomplete
            multiple
            color='primary'
            options={tags}
            value={selectedTags}
            onChange={(evt, newValue) => replace(newValue)}
            labelKey='name'
          />
        </FormControl>
      )}
      rules={{ required: false }}
    />
)