issue: While performing remove and append array is not maintaining the correct state (working with MUI datagrid pro)

[ChinmaySince1997]

Version Number

7.43.7

Codesandbox/Expo snack

https://codesandbox.io/s/brave-elgamal-zpkh2c?file=/demo.tsx

Steps to reproduce

1. add a row by clicking on add button. add 3 rows.
2. add some values for name and age.
3. delete any row.
4. click on add to add the new row.
   Output: We can see that 4 rows in the data grid

Expected behaviour

When we add a new row we should get only 3 rows i.e 2 old rows and 1 new row with empty data

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

[ChinmaySince1997]

My observations:
After deleting any row using the remove function. If you see the logs watcher is getting updated 2 times. 1st time with the correct value and 2nd time with the wrong one.
After we tried to append anything it is getting a similar value while appending that data.

[leapful]

@ChinmaySince1997

Please provide a stable codesandbox url to re-produce the issue. The provided one in this discussion is not usable anymore.

[ChinmaySince1997]

@leapful
Please check this code sandbox URL
https://codesandbox.io/s/laughing-snyder-t8cmsx?file=/demo.tsx

[leapful]

@ChinmaySince1997

Sorry for the late response.

The problem is because you are using fields from useFieldArray hook as rows props for MUI Grid component but Grid component also alter the fields object inside its implementation

You need to get and cloned current value of test field array by getValues method and prevent deleted row to be registered with react-hook-form again by checking if deleted row does not exists in current test field array then do nothing.

Working demo: https://codesandbox.io/s/strange-surf-cd13lp?file=/demo.tsx

[Bragatheeshp]

how will you take id in getValues it not coming on that
to give DataGrid getById

[qingh]

@ChinmaySince1997

Sorry for the late response.

The problem is because you are using fields from useFieldArray hook as rows props for MUI Grid component but Grid component also alter the fields object inside its implementation

You need to get and cloned current value of test field array by getValues method and prevent deleted row to be registered with react-hook-form again by checking if deleted row does not exists in current test field array then do nothing.

Working demo: https://codesandbox.io/s/strange-surf-cd13lp?file=/demo.tsx

Hi @leapful

In the example you provided, I found that formState.isDirty doesn’t work properly. Do you have any good suggestions?