Error removing tr when data array is altered

[dejan9393]

Receiving an "Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." when changing the data array, only under certain conditions which I haven't dug deep enough to figure out.

I have managed to make a specific reproduction to showcase the issue by initially having a data array with 10 elements, updating it to an array of 6 elements, then again down to 4 elements:

demo here:
https://infrequent-air.glitch.me/

[RoXuS]

Hi @dejan9393, thanks for the issue.
We use the component with a footer to change page and size of our data and we don't have this issue, I have to investigate before merging your PR.

Thx !

[dejan9393]

Yep i'm also using the included footer for changing page/size of the data and most of the time it works fine - it's only with certain changes in the size of the data that it actually happens.

I think it's because the array is re-indexed when it is spliced, so the next iteration removes a TR node but then removes no row from the tables array.

Example:

Let's say table is an array of 4 rows:

this.table = [a, b, c, d]

We change the size of our data to 2, leaving only two rows, splicing indexes 3 & 4 from table:

this.table.splice(2, 1) (table gets re-indexed and is now [0 => a, 1 => b, 2 => d])

this.table.splice(3, 1) (table remains the same, as there is nothing at index 3)

Next time the data changes and we attempt to remove the tr at index 2, we get an error as that tr had previously been removed, but not correctly removed from the tables array

[RoXuS]

great, its fixed by your PR thx !