[bug] Grid DND with different hight items causes recursive position change

[sanex3339]

We have a CSS Grid DND container containing items with different height. When dragging a top item to the second line, it causes infinite position change, i believe because the height of the second row is changing.

See the video:

2023-12-11.14.06.30.mov

I see that the official demo shows grid-like layout using inline-block and it works well.
With the display:flex + flex-wrap: wrap + flex-basis, that simulates grid layout, it works as well.

But it'd be nice to use CSS Grids

We use the React and have the following config for the sortablejs/react:

animation={150}
swapThreshold={0.25}
emptyInsertThreshold={0}

Expected behavior

No infinite position change when in our case.

Versions - Look in your package.json for this information:
"react-sortablejs": "6.1.4",
"sortablejs": "1.15.0",

Also the same with the latest 1.15.1, also 1.15.1 introduces additional issues

[owen-m1]

I can't reproduce this, wondering if you could create a demo JSBin so that I can try it. Or share the CSS you used in the video.

[owen-m1]

Could you verify if it's fixed in 1.15.2?

[VineethK336]

Hello! I am able to replicate the issue even in 1.15.2. Here's a repro: https://stackblitz.com/edit/react-vn8b5d?file=src%2FApp.js,src%2FGrid.js,src%2FGridItem.js,src%2Findex.js,src%2Fstyle.css,package.json

Happens only when you try to move a smaller item in the position of the longer item.

Flickering.of.grid.items.mov

[VineethK336]

If a plain JS repro helps, you check out this one: https://stackblitz.com/edit/js-rmkuwx?file=index.js,index.html,style.css

Same issue, try dragging 5th element onto the bottom half of 3rd element, you can see the flicker happen.

Plain.js.repro.mov

[owen-m1]

Thank you, grid elements with dynamic size is not fully supported yet. In a future update I can add a grid direction option.