fix: prevent droppable from colliding with own child

Author: chrisvxd

.changeset/dont-collide-with-child.md

@@ -0,0 +1,5 @@
+---
+'@dnd-kit/dom': patch
+---
+
+Track the path of the item to prevent a droppable from colliding with its own child.

packages/abstract/src/core/collision/observer.ts

@@ -73,7 +73,7 @@ export class CollisionObserver<
       return DEFAULT_VALUE;
     }
 
-    const collisions: Collision[] = [];
+    const collisionMap: Map<Droppable, Collision> = new Map();
 
     for (const entry of entries ?? registry.droppables) {
       if (entry.disabled) {
@@ -90,7 +90,6 @@ export class CollisionObserver<
         continue;
       }
 
-      entry.shape;
       const collision = untracked(() =>
         detectCollision({
           droppable: entry,
@@ -103,10 +102,23 @@ export class CollisionObserver<
           collision.priority = entry.collisionPriority;
         }
 
-        collisions.push(collision);
+        collisionMap.set(entry, collision);
       }
     }
 
+    // Filter out collisions of items that contain other items
+    const collisions = Array.from(collisionMap.entries())
+      .filter(([droppable]) => {
+        if (source && droppable.path.indexOf(source.id) !== -1) {
+          // Dragged item is parent of collision target. Filter out collision
+          console.log(source, 'contains', droppable);
+          return false;
+        }
+
+        return true;
+      })
+      .map(([_, collision]) => collision);
+
     collisions.sort(sortCollisions);
 
     return collisions;

packages/abstract/src/core/entities/droppable/droppable.ts

@@ -2,7 +2,12 @@ import {derived, effects, reactive, type Effect} from '@dnd-kit/state';
 import type {Shape} from '@dnd-kit/geometry';
 
 import {Entity} from '../entity/index.ts';
-import type {EntityInput, Data, Type} from '../entity/index.ts';
+import type {
+  EntityInput,
+  Data,
+  Type,
+  UniqueIdentifier,
+} from '../entity/index.ts';
 import {
   CollisionPriority,
   type CollisionDetector,
@@ -90,4 +95,6 @@ export class Droppable<
   public get isDropTarget() {
     return this.manager?.dragOperation.target?.id === this.id;
   }
+
+  public path: UniqueIdentifier[] = [];
 }

packages/dom/src/core/entities/droppable/droppable.ts

@@ -2,6 +2,7 @@ import {Droppable as AbstractDroppable} from '@dnd-kit/abstract';
 import type {
   Data,
   DroppableInput as AbstractDroppableInput,
+  UniqueIdentifier,
 } from '@dnd-kit/abstract';
 import {defaultCollisionDetection} from '@dnd-kit/collision';
 import type {CollisionDetector} from '@dnd-kit/collision';
@@ -19,6 +20,32 @@ export interface Input<T extends Data = Data>
   element?: Element;
 }
 
+function getPathArray(
+  droppables: DragDropManager['registry']['droppables'],
+  target: Element
+): UniqueIdentifier[] {
+  // Create a map from element to id for easy lookup
+  const elementMap = new Map<Element, UniqueIdentifier>();
+  Array.from(droppables.value).forEach((item) => {
+    if (item?.element) {
+      elementMap.set(item.element, item.id);
+    }
+  });
+
+  const path: UniqueIdentifier[] = [];
+  let currentElement = target.parentElement;
+
+  while (currentElement) {
+    const parentId = elementMap.get(currentElement);
+    if (parentId) {
+      path.unshift(parentId);
+    }
+    currentElement = currentElement.parentElement;
+  }
+
+  return path;
+}
+
 export class Droppable<T extends Data = Data> extends AbstractDroppable<
   T,
   DragDropManager
@@ -69,6 +96,10 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
               !this.disabled &&
               this.accepts(source);
 
+            this.path = element
+              ? getPathArray(manager.registry.droppables, element)
+              : [];
+
             if (observePosition) {
               const positionObserver = new PositionObserver(
                 element,