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

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

Open cronco opened this issue 4 years ago • 8 comments

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:

Go to https://codepen.io/cronco/pen/KKVzVLg
Drag the first element to the right.
After dragging over the 3rd element you should see it replacing it.
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

Jun 16 '20 09:06 cronco

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.

Sep 01 '20 04:09 waynevanson

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

Sep 01 '20 04:09 waynevanson

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.