Buggy horizontal reorder

[schwjustin]

Expected behavior

Smoothly move items horizontally and smoothly place them.

Actual behavior

I'm able to drag an item from right to left smoothly, but when I let go to place it there is a visual glitch where the placed item disappears and then reappears about 10px to the left of where it should be and then moves into its correct new position.

Steps to reproduce

const Header = () => {
    const [tabs, setTabs] = useState<any[]>([{ id: '0' }, { id: '1' }]);

    const reorder = (list, startIndex, endIndex) => {
        const result = Array.from(list);
        const [removed] = result.splice(startIndex, 1);
        result.splice(endIndex, 0, removed);

        return result;
    };

    const onDragEnd = (result) => {
        console.log(result);

        if (!result.destination) {
            return;
        }

        const newTabs = reorder(tabs, result.source.index, result.destination.index);

        setTabs(newTabs);
    };

    console.log('Render');

    return (
        <div
            className="w-full bg-black shrink-0 px-4"
            style={{
                height: 40,
            }}
        >
            <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="tabs" direction="horizontal">
                    {(provided, snapshot) => (
                        <div
                            className="flex overflow-hidden whitespace-nowrap"
                            {...provided.droppableProps}
                            ref={provided.innerRef}
                        >
                            {tabs.map((tab, index) => (
                                <Draggable key={tab.id} draggableId={tab.id} index={index}>
                                    {(provided, snapshot) => {
                                        return (
                                            <div
                                                ref={provided.innerRef}
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps}
                                                className={`flex items-center p-2 border rounded bg-gray-100 mr-1 transition-transform ${
                                                    snapshot.isDragging
                                                        ? 'bg-gray-200 cursor-move tab-item dragging'
                                                        : 'tab-item'
                                                }`}
                                            >
                                                <button className="mr-2 bg-transparent border-none text-lg cursor-pointer text-black">
                                                    x
                                                </button>
                                                <span className="text-black">{tab.id}</span>
                                            </div>
                                        );
                                    }}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        </div>
    );
};

const HeaderMemo = memo(Header);

HeaderMemo.displayName = 'HeaderMemo';

// I'm using this header in my code as <HeaderMemo /> and I've tried it with memo and without.

What version of React are you using?

react ^18.3.1

What version of @hello-pangea/dnd are you running?

@hello-pangea/dnd ^16.6.0

What browser are you using?

Google Chrome

Demo

Screen.Recording.2024-05-28.at.8.11.22.AM.mov

[bernaferrari]

Same happens to me on vertical reorder too!

[pavan-singh-iphtech]

in case of vertical reorder
it is not working when array is not rendering properly when multiple row render your array data file rather then one row

[bernaferrari]

can you be more specific @pavan-singh-iphtech ?

[pavan-singh-iphtech]

can you be more specific @pavan-singh-iphtech ?
I think the problem is due to the library. Suppose our item count is more than 10; we render them in a grid. In the first row, we render 5 items, and in the second row, we render the other 5. When using this library with direction='horizontal', an issue arises during drag-and-drop. When you try to drag and drop an item from the second row, it instead drags an item from the first row. This is the problem I am facing. I believe this library is primarily designed for drag-and-drop operations within a single list."

Does that sound good?
Note: I am talking about in context of Next.js and in TypeScript