swapping rows in lightning-datatable invoke render twice for the row goes down

[reiniergs]

Description

When we swap two rows in lightning datatable is invoke the render of the row is being move down, the second time the render is called props have the previous values. I assume is trying to reuse the same node.

Steps to reproduce in the playground

https://playground.lwcjs.org/projects/iJaIlF27S/4/edit

Steps to Reproduce in lgc

1. In lightning components repo start the standalone app by running yarn app:start inside of ui-lightning-suite folder
2. in https://github.com/salesforce/lightning-components/blob/master/ui-lightning-suite/src/main/modules/demo/app/app.html file insert

   <demo-datatable-app-ex-example></demo-datatable-app-ex-example>

   after line 4

3. click in the down arrow that swap the first column with the second column

You are going to see the second row keep the up arrow disabled even if we update the data to make the arrow enable after the swap

[jodarove]

@reiniergs can you create a simpler repro example in the playground?

[reiniergs]

@jodarove done!

[caridy]

I suspect this is due to the snabbdom diffing algo that is moving pieces up and down in the dom. In one direction is just move one element, in the other direction is remove and reinsert elements, which might cause issues with the svg or something like that.

If this is the issue, then we don't have any immediate solution, other than in user-land, the author must readjust the image after every insertion. Log the rendered, connected and disconnect callback for every component/row, and let's see what is going on.

[caridy]

This might be solved by https://github.com/salesforce/lwc/pull/852, we will have to test it.

[caridy]

@reiniergs the PR was merged, maybe it is a good time to see if this is still an issue.

[wimvanerp]

I am not able to see the playground or the code in github, could you tell me how this demo-datatable-app-ex-example exactly looks like? I am making something similar.