sortable IDs must be strings, and this isn't documented anywhere

Based on the documentation, it seems like the id prop used by the Sortable preset can be any primitive, including a number. However, in the examples below, only strings produce the correct, animated, result.

It unfortunately cost me several days of debugging to figure this out, as the only thing broken are the animations - the rest of the functionality, including the onDragStart/onDragEnd stuff, works as expected with numeric IDs!

It would be great if numeric IDs were supported; failing that, it would ideally be a runtime error to provide non-numeric IDs to sortable interfaces!

Works properly:

import React, { useState } from 'react'
import {
  DndContext,
  closestCenter,
  MouseSensor,
  TouchSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core'
import {
  useSortable,
  arrayMove,
  SortableContext,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'

export function MinimalDnd({ packQuery }) {
  const [items, setItems] = useState(['1', '2', '3'])
  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor))

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        {items.map((id) => (
          <SortableItem key={id} id={id} />
        ))}
      </SortableContext>
    </DndContext>
  )

  function handleDragEnd(event) {
    const { active, over } = event

    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id)
        const newIndex = items.indexOf(over.id)

        return arrayMove(items, oldIndex, newIndex)
      })
    }
  }
}

export function SortableItem(props) {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id: props.id })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  }

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

Animations completely broken

import React, { useState } from 'react'
import {
  DndContext,
  closestCenter,
  MouseSensor,
  TouchSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core'
import {
  useSortable,
  arrayMove,
  SortableContext,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'

export function MinimalDnd({ packQuery }) {
  const [items, setItems] = useState([1, 2, 3])
  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor))

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        {items.map((id) => (
          <SortableItem key={id} id={id} />
        ))}
      </SortableContext>
    </DndContext>
  )

  function handleDragEnd(event) {
    const { active, over } = event

    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id)
        const newIndex = items.indexOf(over.id)

        return arrayMove(items, oldIndex, newIndex)
      })
    }
  }
}

export function SortableItem(props) {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id: props.id })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  }

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

[clauderic]

Seems reasonable, feel free to open a new issue or submit a PR where an error is thrown in development only

[qrohlf]

I still think that my recommendation for throwing a runtime error when useSortable is passed a non-string id is a reasonable one, since this is a complex library with a lot of documentation, and the current behavior of mostly working, but with broken animations when a non-string ID is passed is extremely confusing if you overlook that doc section!

Happy to submit a PR if you think it’s a good idea.