[BUG]Sortable Blinks when drag and drop is complete

[vaynevayne]

This is the code before dnd was added: https://github.com/vaynevayne/soul/blob/main/packages/soul-core/src/Table/SettingModal2.tsx#L47

https://github.com/clauderic/dnd-kit/assets/124666577/7f865dcc-f3c4-48df-b4c9-b8a7bcb95bc0

  const onDragEnd2 = ({active, over}: DragEndEvent) => {
    console.log("active", active)
    console.log("over", over)

    const fromIndex = centerColumns.findIndex((i) => i.title === active.id)
    const toIndex = centerColumns.findIndex((i) => i.title === over?.id)
    console.log("fromIndex", fromIndex)
    console.log("toIndex", toIndex)

    const moved = arrayMove(centerColumns, fromIndex, toIndex)
    console.log("moved", moved)

    const newColumnsState = produce(columnsState, (draft) => {
      moved.forEach((col, idx) => {
        const colKey = findColKey(col)
        draft[colKey] = {
          ...draft[colKey],
          order: idx,
        }
      })
    })

    console.log("active.id", active.id, over?.id)

    if (active.id !== over?.id) {
      setColumnsState(newColumnsState)
    }
  }

const SortItem = ({title, onDelete}) => {
  const {attributes, listeners, setNodeRef, transform, transition, isDragging} =
    useSortable({
      id: title,
    })

  const style: React.CSSProperties = {
    display: "flex",
    alignItems: "center",
    padding: "4px 8px",
    border: "1px solid rgba(5, 5, 5, 0.06)",
    borderRadius: 4,
    margin: "4px 0",
    transform: CSS.Transform.toString(transform && {...transform, scaleY: 1}),
    transition,
    cursor: "move",
    ...(isDragging ? {position: "relative", zIndex: 9999} : {}),
  }

  return (
    <div
      ref={setNodeRef}
      className="li"
      style={style}
      {...attributes}
      {...listeners}
    >
      <span style={{flex: 1}}> {title}</span>
      <CloseOutlined onClick={onDelete} />
    </div>
  )

}

<DndContext
              sensors={sensors}
              modifiers={[restrictToVerticalAxis]}
              onDragEnd={onDragEnd2}
              collisionDetection={closestCenter}
            >
              <SortableContext
                // rowKey array
                items={centerColumns.map((i) => i.title as string)}
                strategy={verticalListSortingStrategy}
              >
                {centerColumns.map((column, index) => (
                  <SortItem
                    title={column.title}
                    key={index}
                    onDelete={() => {
                      setColumnsState(
                        produce(columnsState, (draft) => {
                          const colKey = findColKey(column)
                          draft[colKey] = {
                            ...draft[colKey],
                            visible: false,
                          }
                        })
                      )
                    }}
                  />
                ))}
              </SortableContext>
            </DndContext>

  const leftColumns = useMemo(() => {
    return mapStateToColumns(columns, columnsState, !!meta.defaultVisible)
      .sort(getSorter(columnsState))

      .filter((item) => item.visible)
      .filter((item) => item.fixed === "left")
      .map((item) => ({
        ...item,
        id: item.id ?? findColKey(item),
        name: item.title,
      }))
  }, [columns, columnsState, meta.defaultVisible])

[btomaj]

I also have this issue

[hway-git]

mark resolved: The key on your SortItem component must match the id in useSortable