When an item is dropped, other sortable items move unexpectedly

[spidertwin2]

Hello,

When an item is dragged to the right, other items move unexpectedly to the left before shifting back into place. When an item is moved to the left and dropped, it unexpectedly travels a bit more to the left before reaching its position.

Why this sudden left shift when items are dropped? Please see sandbox link.

Thanks 🌴

[ivanjeremic]

I have the same issue.

[pstrassmann]

Try replacing your Chakra <HStack> component with <div style={{display: 'flex', gap: '1rem'}}>. I know this doesn't get to the root of the issue but may help you troubleshoot. I believe this error has something to do with the styling on this parent component.

[spidertwin2]

I replaced <HStack> with <div>, but the problem still persists.

[pstrassmann]

See this codesandbox: https://codesandbox.io/s/exciting-mendeleev-o2gupw. I've just replaced the <HStack> with the <div> as suggested and I'm no longer seeing the shift on drag start or end. Is the problem still persisting there?