[bug] Sortable applied on a css display: contents container behave erratically in certain scenarios

[cronco]

If you use sortable on a display: contents inside a display: grid and the rows are incomplete, moving from the first half of a top row will place the element at the end of the grid.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/cronco/pen/KKVzVLg
2. Drag the first element to the right.
3. After dragging over the 3rd element you should see it replacing it.
4. Actually see the element get positioned at the end of the

Expected behavior

The first element should be placed as the third element, but instead it is the last one.

Information

Manually setting direction: horizontal OR applying the sortable directly to the display: grid container and skipping the display: contents intermediary element seems to fix it (that is not an option for my use case). My intuition is that the direction setting algorithm is somehow confused by the behaviour of display: contents.

This is a highly specific bug, so I understand if it gets marked as won't fix.

Versions - Look in your package.json for this information:
sortablejs = ^1.10.2
@types/sortablejs = ^x.x.x

Additional context
Add any other context about the problem here.

Reproduction
codesandbox: https://codepen.io/cronco/pen/KKVzVLg

[waynevanson]

I'm not sure what display: contents does. Here's some information for later me: https://developer.mozilla.org/en-US/docs/Web/CSS/display

My intuition is that the direction setting algorithm is somehow confused by the behaviour of display: contents.

Probably an accurate guess.

[waynevanson]

Adding animation: 300 gives much more detail into what the algorithm may be thinking.

[arggh]

Bumped into this very same problem today.

My use case is, I want to create a reusable component <Sortable> which could be used like so:

<Columns>
     <Sortable
       items={images}
       on:reorder={handleReorder}
       key="category"
       let:item
     >
        <Column>
           <ImageItem {...item} />
        </Column>
     </Sortable>
 </Columns>

...which is why inside the <Sortable> component, I have a <div class="sortableContainer"> that has display: contents; set.

[Wyzix33]

Any news on this?

[simone-baldini]

Any updates?

[jrmacks]

+1

[Actinopterygii]

+1