diff --git a/frontend/src/components/PanelGroups.tsx b/frontend/src/components/PanelGroups.tsx index be4d270..1b997d4 100644 --- a/frontend/src/components/PanelGroups.tsx +++ b/frontend/src/components/PanelGroups.tsx @@ -2,12 +2,18 @@ import { type ReactNode } from "react"; import { closestCenter, DndContext, + KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent, } from "@dnd-kit/core"; -import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"; +import { + arrayMove, + SortableContext, + sortableKeyboardCoordinates, + verticalListSortingStrategy, +} from "@dnd-kit/sortable"; import type { PanelLayout } from "../lib/panelLayout"; import PanelGroup from "./PanelGroup"; @@ -29,7 +35,12 @@ export default function PanelGroups({ setLayout: (l: PanelLayout) => void; editing: boolean; }) { - const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } })); + const sensors = useSensors( + useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), + // The group grips are focusable and call themselves reorderable; without this only a pointer + // could actually move them (keyboard drag matched the other sortable lists). + useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), + ); const byId = new Map(items.map((it) => [it.id, it])); const orderedAvailable = layout.order.filter((id) => byId.has(id));