diff --git a/.changeset/fix-zero-id.md b/.changeset/fix-zero-id.md new file mode 100644 index 00000000..951af17a --- /dev/null +++ b/.changeset/fix-zero-id.md @@ -0,0 +1,6 @@ +--- +'@dnd-kit/core': patch +'@dnd-ki/sortable': patch +--- + +Fix bug with draggable and sortable elements with an `id` equal to `0`. diff --git a/packages/core/src/components/DndContext/DndContext.tsx b/packages/core/src/components/DndContext/DndContext.tsx index 55071ad2..dceb3397 100644 --- a/packages/core/src/components/DndContext/DndContext.tsx +++ b/packages/core/src/components/DndContext/DndContext.tsx @@ -152,7 +152,7 @@ export const DndContext = memo(function DndContext({ draggable: {active: activeId, nodes: draggableNodes, translate}, droppable: {containers: droppableContainers}, } = state; - const node = activeId ? draggableNodes.get(activeId) : null; + const node = activeId != null ? draggableNodes.get(activeId) : null; const activeRects = useRef({ initial: null, translated: null, @@ -197,7 +197,7 @@ export const DndContext = memo(function DndContext({ ); useLayoutShiftScrollCompensation({ - activeNode: activeId ? draggableNodes.get(activeId) : null, + activeNode: activeId != null ? draggableNodes.get(activeId) : null, config: autoScrollOptions.layoutShiftCompensation, initialRect: initialActiveNodeRect, measure: measuringConfiguration.draggable.measure, diff --git a/packages/core/src/hooks/useDraggable.ts b/packages/core/src/hooks/useDraggable.ts index 48fb19b0..5a580129 100644 --- a/packages/core/src/hooks/useDraggable.ts +++ b/packages/core/src/hooks/useDraggable.ts @@ -38,7 +38,7 @@ const NullContext = createContext(null); const defaultRole = 'button'; -const ID_PREFIX = 'Droppable'; +const ID_PREFIX = 'Draggable'; export function useDraggable({ id, diff --git a/packages/core/src/hooks/utilities/useCachedNode.ts b/packages/core/src/hooks/utilities/useCachedNode.ts index c010d551..ebf1062e 100644 --- a/packages/core/src/hooks/utilities/useCachedNode.ts +++ b/packages/core/src/hooks/utilities/useCachedNode.ts @@ -7,12 +7,12 @@ export function useCachedNode( draggableNodes: DraggableNodes, id: UniqueIdentifier | null ): DraggableNode['node']['current'] { - const draggableNode = id !== null ? draggableNodes.get(id) : undefined; + const draggableNode = id != null ? draggableNodes.get(id) : undefined; const node = draggableNode ? draggableNode.node.current : null; return useLazyMemo( (cachedNode) => { - if (id === null) { + if (id == null) { return null; } diff --git a/packages/core/src/store/reducer.ts b/packages/core/src/store/reducer.ts index fa34ba9e..8606c2d9 100644 --- a/packages/core/src/store/reducer.ts +++ b/packages/core/src/store/reducer.ts @@ -28,7 +28,7 @@ export function reducer(state: State, action: Actions): State { }, }; case Action.DragMove: - if (!state.draggable.active) { + if (state.draggable.active == null) { return state; } diff --git a/packages/sortable/src/hooks/useSortable.ts b/packages/sortable/src/hooks/useSortable.ts index 6560b8a6..7df81f31 100644 --- a/packages/sortable/src/hooks/useSortable.ts +++ b/packages/sortable/src/hooks/useSortable.ts @@ -179,7 +179,7 @@ export function useSortable({ return; } - if (activeId && !previous.current.activeId) { + if (activeId != null && previous.current.activeId == null) { previous.current.activeId = activeId; return; } diff --git a/stories/2 - Presets/Sortable/5-Virtualized.story.tsx b/stories/2 - Presets/Sortable/5-Virtualized.story.tsx index 89bd8126..2c206462 100644 --- a/stories/2 - Presets/Sortable/5-Virtualized.story.tsx +++ b/stories/2 - Presets/Sortable/5-Virtualized.story.tsx @@ -50,7 +50,7 @@ function Sortable({ }) ); const getIndex = (id: UniqueIdentifier) => items.indexOf(id); - const activeIndex = activeId ? getIndex(activeId) : -1; + const activeIndex = activeId != null ? getIndex(activeId) : -1; return ( { const id = items[index]; @@ -104,7 +106,7 @@ function Sortable({ {createPortal( - {activeId ? ( + {activeId != null ? ( (null); const lastOverId = useRef(null); const recentlyMovedToNewContainer = useRef(false); - const isSortingContainer = activeId ? containers.includes(activeId) : false; + const isSortingContainer = + activeId != null ? containers.includes(activeId) : false; /** * Custom collision detection strategy optimized for multiple containers diff --git a/stories/2 - Presets/Sortable/Sortable.tsx b/stories/2 - Presets/Sortable/Sortable.tsx index b96a13f5..c5eaf780 100644 --- a/stories/2 - Presets/Sortable/Sortable.tsx +++ b/stories/2 - Presets/Sortable/Sortable.tsx @@ -117,8 +117,7 @@ export function Sortable({ }: Props) { const [items, setItems] = useState( () => - initialItems ?? - createRange(itemCount, (index) => index + 1) + initialItems ?? createRange(itemCount, (index) => index) ); const [activeId, setActiveId] = useState(null); const sensors = useSensors( @@ -137,7 +136,7 @@ export function Sortable({ const isFirstAnnouncement = useRef(true); const getIndex = (id: UniqueIdentifier) => items.indexOf(id); const getPosition = (id: UniqueIdentifier) => getIndex(id) + 1; - const activeIndex = activeId ? getIndex(activeId) : -1; + const activeIndex = activeId != null ? getIndex(activeId) : -1; const handleRemove = removable ? (id: UniqueIdentifier) => setItems((items) => items.filter((item) => item !== id)) @@ -184,7 +183,7 @@ export function Sortable({ }; useEffect(() => { - if (!activeId) { + if (activeId == null) { isFirstAnnouncement.current = true; } }, [activeId]); @@ -246,7 +245,7 @@ export function Sortable({ adjustScale={adjustScale} dropAnimation={dropAnimation} > - {activeId ? ( + {activeId != null ? ( createRange(20, (index) => `${index + 1}`) ); - const activeIndex = activeId ? items.indexOf(activeId) : -1; + const activeIndex = activeId != null ? items.indexOf(activeId) : -1; const sensors = useSensors( useSensor(PointerSensor), useSensor(KeyboardSensor, {coordinateGetter: sortableKeyboardCoordinates}) @@ -102,7 +102,7 @@ export function Pages({layout}: Props) { - {activeId ? ( + {activeId != null ? ( ) : null} diff --git a/stories/3 - Examples/Tree/SortableTree.tsx b/stories/3 - Examples/Tree/SortableTree.tsx index 32d4bd12..a40436c0 100644 --- a/stories/3 - Examples/Tree/SortableTree.tsx +++ b/stories/3 - Examples/Tree/SortableTree.tsx @@ -129,7 +129,7 @@ export function SortableTree({ return removeChildrenOf( flattenedTree, - activeId ? [activeId, ...collapsedItems] : collapsedItems + activeId != null ? [activeId, ...collapsedItems] : collapsedItems ); }, [activeId, items]); const projected = @@ -156,9 +156,10 @@ export function SortableTree({ }) ); - const sortedIds = useMemo(() => flattenedItems.map(({id}) => id), [ - flattenedItems, - ]); + const sortedIds = useMemo( + () => flattenedItems.map(({id}) => id), + [flattenedItems] + ); const activeItem = activeId ? flattenedItems.find(({id}) => id === activeId) : null;