search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.71k stars 632 forks source link

Weird Transform Behavior on the Sortable Items When Parent/Ancestor Divs have Animations with Transform #1411

Open H4JUN opened 4 months ago

H4JUN commented 4 months ago

https://github.com/clauderic/dnd-kit/assets/74544822/78e82406-39a9-41f2-9351-7f1f1d3a3f56

Link to codesandbox

Steps to reproduce:

  1. Open the sliding div using "Click Me" button.
  2. Click on one of the "X" buttons to remove the sortable item from list
  3. The clicked item and the items following it will shift from right to left. This behavior happens only during the first removal of the items. Subsequent clicks of the "X" button shows expected behavior.

Upon logging the transform value obtained from useSortable hook in the SortableListItem, I get an Object with the x property set to a value (199.23332214, the value changes everytime) when it should be set to zero.

As a temporary workaround, I have manually set transform.x to be 0, given that my sortable list is a vertical list. However, if anyone comes up with a horizontal sortable list when its parent/ancestor has an animation that transforms on the x-axis, or a vertical list with animation on y-axis, then I think it cannot be bypassed that easily.

Am I missing something from the documentation or did I do anything wrong in my code? Or is this an issue that needs to be addressed?

silviapio commented 3 months ago

I have the exact same problem when the list is in a dialog that can be moved around. So basically transform gets the x and y values from the previous origin, so first interaction will have those x and y, and the next one(s) will be correct. For me setting transform.x doesn't work fully as I can also move the dialog vertically so the items would move a bit more or less vertically... I am wondering if there is some other way of fixing this weird behavior?

Arkellys commented 3 months ago

I think it's the same issue as https://github.com/clauderic/dnd-kit/issues/615

silviapio commented 3 months ago

in my case, I tried with the solution of #615 but it did not help. What we did since ours was a vertical list, was to set transform.x to 0 and transform.y to the height of the element.