Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with clicking on the same Item twice freezes entire sortable list?

See original GitHub issue

I would appreciate a bit of help not sure what I am doing wrong, trying to setup fairly simple example as below:

import React, { useState } from 'react';
import { DndContext, DragOverlay, useDraggable } from '@dnd-kit/core';
import { SortableContext, useSortable } from '@dnd-kit/sortable';

import './App.css';

const LIST = [
    { id: 1, name: 'TEST 1' },
    { id: 2, name: 'TEST 2' },
    { id: 3, name: 'TEST 3' },
    { id: 4, name: 'TEST 4' },
    { id: 5, name: 'TEST 5' },
];

const Item = ({id, list}) => {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({id: id});
    const item = list.find(ii => ii.id === id) || { name: 'UNKNONW' };
    return (
        <div
            ref={setNodeRef}
            className="app__item"
            {...listeners}
            {...attributes}
        >
            {item.name}
        </div>
    );
}

const App = () => {
    const [list, setList] = useState(LIST);
    const [num, setNum] = useState(0);
    const [activeId, setActiveId] = useState(null);

    const handleDragStart = (e) => {
        console.log('Start', e.active);
        setActiveId(e.active.id);
    };

    const handleDragEnd = (e) => {
        console.log('END', e);
        if (!e.over) return;
        setNum((p) => p+1);
        setActiveId(null);
        setList((prev) => {
            let lst = [...prev];
            const cut = lst.splice(lst.findIndex(a=>a.id===e.active.id), 1);
            lst.splice(lst.findIndex(a=>a.id===e.over.id)+1,0,{...cut[0]});
            console.log(cut, JSON.stringify(lst, null, 2));
            return [...lst];
        });
    };
    
    const handleDragMove = (e) => {
        // console.log(e);
    };
    const handleDragCancel = (e) => {
        console.log('CANCEL',e);
    };
      
    return (
        <div className="app">
            <DndContext
                onDragEnd={handleDragEnd}
                onDragStart={handleDragStart}
                onDragMove={handleDragMove}
                onDragCancel={handleDragCancel}
            >
                <SortableContext items={list}>
                    <div className="app__container">
                        {list.map((item) => {
                            return <Item key={item.id} id={item.id} list={list} />
                        })}
                    </div>
                </SortableContext>
                <DragOverlay>
                    {activeId ? <Item id={activeId} list={list} /> : null}
                </DragOverlay>
            </DndContext>
        </div>
    );
}

export default App;

As soon as any item is touched twice all items will stop working, any clue why?