Theo's Typesafe Cult•2y ago

dnd-kit with trpc animation glitch on reorder

i'm having this issue with trpc and https://dndkit.com/ (sortable preset), where the reorder of an item works, but causes a weird jump in the card, originating from the top of the viewport. if anything, i think it has to do with react-query fetching behavior, but i'm entirely lost as to what could be causing this. i simplified the components below, and this is the general idea of what they look like:

// fetches and renders the list (near identical to the docs)
const BasicListEditor = () => {
  const { data: selections } = api.selection.getOwnSelections.useQuery();
  const utils = api.useContext();

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

    if (active.id !== over?.id) {
      utils.selection.getOwnSelections.setData(undefined, (prev) => {
        if (!prev) return prev;

        const oldIndex = prev?.findIndex((a) => a.id === active.id);
        const newIndex = prev?.findIndex((a) => a.id === over?.id);

        return arrayMove(prev, oldIndex, newIndex);
      });
    }
  }

  const sensors = useSensors(useSensor(PointerSensor));

  return (
    <DndContext
      onDragEnd={handleDragEnd}
      sensors={sensors}
      collisionDetection={closestCenter}
    >
      <SortableContext items={selections} strategy={verticalListSortingStrategy} >
        {selections.map((a) => ( <SortableItem key={a.id} id={a.id} /> ))}
      </SortableContext>
    </DndContext>
  );
};
 
// item that gets sorted
function SortableItem({ id }: { id: string }) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });

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

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners} >
      <p className="text-xl text-blue-500">THIS IS LIST ITEM {id}</p>
    </div>
  );
};

// fetches and renders the list (near identical to the docs)
const BasicListEditor = () => {
  const { data: selections } = api.selection.getOwnSelections.useQuery();
  const utils = api.useContext();

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

    if (active.id !== over?.id) {
      utils.selection.getOwnSelections.setData(undefined, (prev) => {
        if (!prev) return prev;

        const oldIndex = prev?.findIndex((a) => a.id === active.id);
        const newIndex = prev?.findIndex((a) => a.id === over?.id);

        return arrayMove(prev, oldIndex, newIndex);
      });
    }
  }

  const sensors = useSensors(useSensor(PointerSensor));

  return (
    <DndContext
      onDragEnd={handleDragEnd}
      sensors={sensors}
      collisionDetection={closestCenter}
    >
      <SortableContext items={selections} strategy={verticalListSortingStrategy} >
        {selections.map((a) => ( <SortableItem key={a.id} id={a.id} /> ))}
      </SortableContext>
    </DndContext>
  );
};
 
// item that gets sorted
function SortableItem({ id }: { id: string }) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });

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

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners} >
      <p className="text-xl text-blue-500">THIS IS LIST ITEM {id}</p>
    </div>
  );
};

here's also a video of what's happening:

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

dnd-kit with trpc animation glitch on reorder