diff --git a/packages/core/components/DragDropContext/index.tsx b/packages/core/components/DragDropContext/index.tsx index fd581c37ed..e0031aa892 100644 --- a/packages/core/components/DragDropContext/index.tsx +++ b/packages/core/components/DragDropContext/index.tsx @@ -26,6 +26,7 @@ import { ComponentDndData } from "../DraggableComponent"; import { isElement } from "@dnd-kit/dom/utilities"; import { PointerSensor } from "./PointerSensor"; +import { collisionStore } from "../DraggableComponent/collision/dynamic/store"; const DEBUG = false; @@ -95,6 +96,13 @@ const DragDropContextClient = ({ useZoneStore.setState({ zoneDepthIndex, areaDepthIndex }); + // Disable fallback collisions temporarily after zone change, as + // these can cause unexpected collisions + collisionStore.setState({ fallbackEnabled: false }); + setTimeout(() => { + collisionStore.setState({ fallbackEnabled: true }); + }, 500); + setTimeout(() => { // Force update after debounce manager.collisionObserver.forceUpdate(true); diff --git a/packages/core/components/DraggableComponent/collision/dynamic/index.ts b/packages/core/components/DraggableComponent/collision/dynamic/index.ts index 0260b1e7cc..fd3492410b 100644 --- a/packages/core/components/DraggableComponent/collision/dynamic/index.ts +++ b/packages/core/components/DraggableComponent/collision/dynamic/index.ts @@ -12,6 +12,7 @@ import { trackMovementInterval } from "./track-movement-interval"; import { collisionDebug } from "../collision-debug"; import { closestCorners } from "@dnd-kit/collision"; import { DragAxis, Direction } from "../../../../types"; +import { collisionStore } from "./store"; export type CollisionMap = Record< string, @@ -59,6 +60,8 @@ export const createDynamicCollisionDetector = ( const { center: dragCenter } = dragShape; + const { fallbackEnabled } = collisionStore.getState(); + const interval = trackMovementInterval(position.current, dragAxis); dragOperation.data = { @@ -128,7 +131,7 @@ export const createDynamicCollisionDetector = ( return { ...collision, id: shouldFlushId ? "flush" : collision.id }; } - if (dragOperation.source?.id !== droppable.id) { + if (fallbackEnabled && dragOperation.source?.id !== droppable.id) { // Only calculate fallbacks when the draggable sits within the droppable's axis projection const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && diff --git a/packages/core/components/DraggableComponent/collision/dynamic/store.ts b/packages/core/components/DraggableComponent/collision/dynamic/store.ts new file mode 100644 index 0000000000..cde6daa9da --- /dev/null +++ b/packages/core/components/DraggableComponent/collision/dynamic/store.ts @@ -0,0 +1,7 @@ +import { createStore } from "zustand/vanilla"; + +export const collisionStore = createStore<{ + fallbackEnabled: boolean; +}>(() => ({ + fallbackEnabled: false, +}));