PR4814: fix deeply nested replace on row edit

[bu3alwa]

Fix #4814 issue with deeply nested object

@Tsareff feel free to test it

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview		Aug 27, 2023 11:24pm

[bu3alwa]

@melloware can't add you as a reviewer but let me know if this is sufficient for a fix.

[Tsareff]

Hi @bu3alwa! Thanks for such a quick response! Unfortunately, I receive an error "Uncaught TypeError: "somePropertyName" is read-only". It traces to this new mutation method you've added.

[bu3alwa]

Hi @bu3alwa! Thanks for such a quick response! Unfortunately, I receive an error "Uncaught TypeError: "somePropertyName" is read-only". It traces to this new mutation method you've added.

Thanks for testing it. What I tested yesterday didn't have anything that's read-only. I am wondering what is read-only that is causing this issue.

Are you using the same example from the reproducer link or a different one?

[Tsareff]

Hi @bu3alwa! Thanks for such a quick response! Unfortunately, I receive an error "Uncaught TypeError: "somePropertyName" is read-only". It traces to this new mutation method you've added.

Thanks for testing it. What I tested yesterday didn't have anything that's read-only. I am wondering what is read-only that is causing this issue.

Are you using the same example from the reproducer link or a different one?

No, I'm using it in my project as a yalc linked library. As far as I understand it can't perform a mutation on currentData in editorCallback function. Moreover, line 272 let = editingRowData = { ...editingRowDataState } also was with an error. I was able to fix it with full copy const editingRowData = JSON.parse(JSON.stringify(editingRowDataState));.

[bu3alwa]

Thanks I'll take a look soon. The json.parse method generally gets into more complications than its worth. And I think you lose Date as well. I'll do a clone instead of mutating the object.

[bu3alwa]

ok so I am having a hard time reproducing the error you got. Can you provide and example of how you are passing the data to the column? The example you had before works well and it sound like s read only property in the object is being sent to the prop.

[Tsareff]

ok so I am having a hard time reproducing the error you got. Can you provide and example of how you are passing the data to the column? The example you had before works well and it sound like s read only property in the object is being sent to the prop.

Hi @bu3alwa! Thank you for the feedback. Let me double-check my data then.

[bu3alwa]

ok, tested and its working with the new implementation.

One thing to note that should be a separate issue when you are on the price in row edit mode example. Typing a number triggers twice when you type. There is some useEffect somewhere that's triggering twice on strict mode. Should probably be investigated on a separate ticket. My suspicion is its in InputNumber.

[Tsareff]

Hi @bu3alwa! I checked one more time and the problem with read-only is indeed on my side. I found also another tricky thing. When I create Columns from array of arrays, the method onEditChange can't find editingRowIndex and row is always focused. In my case I just need 28 number inputs in one row, 4 inputs for each day of the week, that is why I'm using such a rendering.

[Tsareff]

Hi @bu3alwa! I checked one more time and the problem with read-only is indeed on my side. I found also another tricky thing. When I create Columns from array of arrays, the method onEditChange can't find editingRowIndex and row is always focused. In my case I just need 28 number inputs in one row, 4 inputs for each day of the week, that is why I'm using such a rendering.

Maybe it is connected with the bug you mentioned earlier about useEffect in InputNumber

[Tsareff]

I've tried also to do it manually running this app locally, not my own. If you add several Columns which should edit the same object <Column field="meta.1.code" header="Code" editor={(options) => numberEditor(options)} style={{ width: '20%' }}></Column> <Column field="meta.1.code1" header="Code 1" editor={(options) => numberEditor(options)} style={{ width: '20%' }}></Column> in the onEditChange method inBodyRow component props.editingRows will have an updated object, but e.data the previous version of it. In this case the row will be always in focused mode.

[Tsareff]

Sorry, one more condition for an error. It happens when you have custom onRowEditChange callback. In this case the pre-built logic is not working, so I need handle the editingRows state like this
const onEditChange = ({ data = [] }) => { setEditingRows([...data].slice(-1)); }

[bu3alwa]

To be clear are we talking about a new issue or is this part of the same issue?

And if you could please provide a example link so I can understand the problem better and use it to test locally.

[Tsareff]

To be clear are we talking about a new issue or is this part of the same issue?

And if you could please provide a example link so I can understand the problem better and use it to test locally.

I really can't tell for sure if it connected to this problem. For me it is, since I cannot perform update if the structure of the table consist of several rows which are getting data from nested object.

Could you please tell me how to create a demo example using the PR code? I mean is it even possible to use codesandbox or smth similar?

[bu3alwa]

To be clear are we talking about a new issue or is this part of the same issue?
And if you could please provide a example link so I can understand the problem better and use it to test locally.

I really can't tell for sure if it connected to this problem. For me it is, since I cannot perform update if the structure of the table consist of several rows which are getting data from nested object.

Could you please tell me how to create a demo example using the PR code? I mean is it even possible to use codesandbox or smth similar?

I am not sure with a specific PR but I just need it as an example code and I can copy and paste it to my local build.

[Tsareff]

Hi @bu3alwa! I figured the problem, it is on my side, but I still would like to mention it. I'm using roweditdoc.js file for this.
This is the products array
useEffect(() => { setProducts([ {meta: {1: {code1: 123, code2: 234}}, inventoryStatus: 'INSTOCK', name: 'Bamboo Watch', price: 66} ]); }, []);

This code is for handling editing rows change. The reason for that is to use additional logic onRowEditChange.
const [editingRows, setEditingRows] = useState([]);
const onEditChange = ({ data = [] }) => { setEditingRows([...data].slice(-1)); }

Number editor:
const numberEditor = (options) => { return <InputNumber value={options.value} onChange={(e) => options.editorCallback(e.value)} />; }

These are the Columns :
<DataTable value={cloneDeep(products)} editMode="row" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }} onRowEditChange={onEditChange} editingRows={editingRows}> <Column field="meta.1.code1" header="Code 1" editor={(options) => numberEditor(options)} style={{ width: '20%' }}></Column> <Column field="meta.1.code2" header="Code 2" editor={(options) => numberEditor(options)} style={{ width: '20%' }}></Column> <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column> <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column> <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column> <Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column> </DataTable>

I'm using cloneDeep from lodash here because in my project data is coming from the redux state and that is why I receive read-only errors. But when I use clone method the result is unexpected somehow.

[Tsareff]

Hi @bu3alwa! Could you please tell me when this fix can be expected to be released?

[bu3alwa]

@Tsareff I'm not an actual maintainer on here so can't give you any estimates

[melloware]

Is this fix final I thought you guys were working out more scenarios?

[bu3alwa]

@melloware I think the other issues were resolved on @Tsareff end, he can confirm. My PR should be ready to go from my end

[Tsareff]

Hi @bu3alwa @melloware! Yes, this fix is working, all other things on my side. Maybe I'm looking at a wrong place, but I don't see the new version. Could you please tell me when can I expect to use it?