Bug in the Sortable Tree Items component causing serious issues

[Eduard-Hasa]

Have been noticing this very bad bug that makes the sortable list items jump in odd places completely making this component unusable. Any way I can become a top donor to prioritize fixing this @clauderic

screen-capture (1).webm

[eshaffer321]

@Eduard-Hasa I was not able to reproduce this issue on the storybook. Have you tried disabling all browser extensions? What browser and version are you using?

[Eduard-Hasa]

@eshaffer321 I was hoping you are onto something but sadly nope. Easily reproducable on multiple devices (IOS and Windows) and multiple browsers (Safari, Chrome, Edge). Im using the latest version of chrome primarily and notice it a bunch you just have to play with the tree items and move them around and you will definitely eventually see it. I even tried a guest window on chrome with no extensions or anything and still seeing the issue pretty quickly after messing with it.

FYI I am seeing this issue on my personal project and the official dnd-kit examples storybook here: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--all-features

Oh boy im really suffering with my personal project because of this bug. Any sort of help is tremendously appreciated.

[growthwp]

We have a puppeteering tool that can mimic drags like you'd do. I used it to mimic 1 drag event/s and have been looking at the drag for 5 mins. I can't replicate this on Chrome/Brave/Firefox at all.

[Eduard-Hasa]

@growthwp As I said I have tried it on multiple devices on multiple browsers. I assure you the issue is there and very easily reproducible. You have to drag different nodes and keep trying and you will see it very quickly you don't need a puppeteering tool. I will personally go buy a new MacBook to show you a screen recording if thats what it takes to prove my devices are not under some kind of spell lol.

I mean you can see my screen shot as proof. That is the official dnd-kit hosted storybook. I have literally used guest mode on chrome every other browser my iphone my 2 ipads all different browsers no apps installed.

By the way the messed up ui is only active while holding the drag. Once dropped it goes back to normal.

[eshaffer321]

@growthwp @growthwp I was able to reproduce the behavior consistently on the story book. Refresh the page, and drag my account to the top and collections to the bottom. Then try to move up my collections and you will see the problem. Haven't dug in to see the reason yet,

[eshaffer321]

Actually, this may be related to this issue? https://github.com/clauderic/dnd-kit/issues/44

[Eduard-Hasa]

Love the support everyone thank you so much for your time and energy. I will proudly donate if I can make this library usable and stable for my project which I'm honestly very close just this bug is preventing me from deploying to production.

For the record my tree items will never change in size. I'm not doing anything fancy like variable heights or anything. I just want the simple sortable tree example on storybook to work without bugs.

[Eduard-Hasa]

Love the support everyone thank you so much for your time and energy. I will proudly donate if I can make this library usable and stable for my project which I'm honestly very close just this bug is preventing me from deploying to production.

For the record my tree items will never change in size. I'm not doing anything fancy like variable heights or anything. I just want the simple sortable tree example on storybook to work without bugs.

[craigcarlyle]

I'm having the same problem in my project and I was happy to find this issue and see that I wasn't the only one 😅

I'll try to dig into dnd-kit this week and see if I can determine the cause.

---

Edit: a quick fix that seemed to work for me was to force the getItemGap function to always return 0. However, I'm not yet familiar enough with the codebase to understand the implications of this change and if this is the root of the problem or if it's a symptom of a problem coming from elsewhere 🤷

[Eduard-Hasa]

@craigcarlyle thank you so much Craig. I will try that and see how it goes.

[craigcarlyle]

@Eduard-Hasa Unfortunately while that worked most of the time, it would result in the occasional item getting rendered in a completely random positon.

What did work for me was disabling transforms completely for all sortable items except the item that is currently being dragged:

const style = useMemo(() => {
    return {
        ...(isDragging ? { transform: CSS.Translate.toString(transform) } : null),
        transition,
    }
}, [isDragging, transform, transition])

I hope that works for you 🙏

[darren10201]

@Eduard-Hasa Unfortunately while that worked most of the time, it would result in the occasional item getting rendered in a completely random positon.

What did work for me was disabling transforms completely for all sortable items except the item that is currently being dragged:

const style = useMemo(() => {
    return {
        ...(isDragging ? { transform: CSS.Translate.toString(transform) } : null),
        transition,
    }
}, [isDragging, transform, transition])

I hope that works for you 🙏

sir, where is this being applied?

[craigcarlyle]

@darren10201 This is my on SortableItem component:

const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
    id,
    data: {
        item,
        type,
    },
})

const style = useMemo(() => {
    return {
        ...(isDragging ? { transform: CSS.Translate.toString(transform) } : null),
        transition,
    }
}, [isDragging, transform, transition])

return (
    <div
        key={id}
        ref={setNodeRef}
        style={style}
        {...attributes}
        {...listeners}
        {...props}
    >
        {children}
    </div>
)

[darren10201]

@craigcarlyle thx for reply, but my issue is similar to

this >.<

and cant fix unless size is static, which will make ui look ugly if it is static

[Eduard-Hasa]

@darren10201 This is my on SortableItem component:

const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
    id,
    data: {
        item,
        type,
    },
})

const style = useMemo(() => {
    return {
        ...(isDragging ? { transform: CSS.Translate.toString(transform) } : null),
        transition,
    }
}, [isDragging, transform, transition])

return (
    <div
        key={id}
        ref={setNodeRef}
        style={style}
        {...attributes}
        {...listeners}
        {...props}
    >
        {children}
    </div>
)

this has unfortunately not fixed the issue. @clauderic I will personally donate to a bounty to have this fixed if possible

[Eduard-Hasa]

@craigcarlyle Hey Craig, is your setup still working. I tried you solution with still terrible buggy behavior.

[Eduard-Hasa]

@kobiburnley is there any way we can please get this labeled as a bug and looked at ?

[Eduard-Hasa]

const style = useMemo(() => {
    return {
        ...(isDragging ? { transform: CSS.Translate.toString(transform) } : null),
        transition,
    }
}, [isDragging, transform, transition])

@craigcarlyle So the reason im saying this solution is not working is because it seems like you just froze the items from not moving during drag. But the issue with that is the indicator is still going to be thrown off due to some underlying algorithm being faulty. Im so desperate for this issue to be fixed its holding up my whole project and would pay someone that is expert at dnd kit to fix it.

[kroussea]

I have the same issue on my projet. The issue also happens in the Sortable Multiple Containers Story

To reproduce the bug, just drag the items from column A to B, and at some point it'll start to break. here's a printscreen of the actual bug in the Story:

[Eduard-Hasa]

Im honestly really surprised this doesnt get fixed because this is a really well done library its a shame that such a small bug makes the whole thing unusable. Id be more then happy to donate for a bounty to get this fixed properly. @clauderic