fix: dont allow dropping on descendant (#227)

Author: lukasbach

next-release-notes.md

@@ -1,9 +1,3 @@
-<!--
-### Breaking Changes
-
-### Features
-
 ### Bug Fixes and Improvements
 
-### Other Changes
--->
+* Fixes bug where dropping an item on its own descendant makes it vanish (#227)

packages/core/src/controlledEnvironment/useOnDragOverTreeHandler.ts

@@ -54,6 +54,31 @@ const getHoveringPosition = (
   return { linearIndex, offset, targetItem, targetLinearItem };
 };
 
+const useIsDescendant = () => {
+  const getParentOfLinearItem = useGetGetParentOfLinearItem();
+  const isDescendant = (
+    treeId: string,
+    itemLinearIndex: number,
+    potentialParents: TreeItem[]
+  ) => {
+    const { parentLinearIndex, parent } = getParentOfLinearItem(
+      itemLinearIndex,
+      treeId
+    );
+
+    if (potentialParents.find(p => p.index === parent.item)) {
+      return true;
+    }
+
+    if (parent.depth === 0) {
+      return false;
+    }
+
+    return isDescendant(treeId, parentLinearIndex, potentialParents);
+  };
+  return isDescendant;
+};
+
 export const useOnDragOverTreeHandler = (
   lastDragCode: string,
   setLastDragCode: (code: string) => void,
@@ -72,6 +97,7 @@ export const useOnDragOverTreeHandler = (
     trees,
   } = useTreeEnvironment();
   const getParentOfLinearItem = useGetGetParentOfLinearItem();
+  const isDescendant = useIsDescendant();
 
   return useStableHandler(
     (
@@ -157,6 +183,11 @@ export const useOnDragOverTreeHandler = (
         linearIndex = parentLinearIndex;
       }
 
+      if (isDescendant(treeId, linearIndex, draggingItems)) {
+        onDragAtPosition(undefined);
+        return;
+      }
+
       const { depth } = targetItem;
       const targetItemData = items[targetItem.item];
 

packages/core/test/dnd-basics.spec.tsx

@@ -324,5 +324,16 @@ describe('dnd basics', () => {
         'after',
       ]);
     });
+
+    it('cant drop items on its own descendants', async () => {
+      const test = await new TestUtil().renderOpenTree();
+      await test.clickItem('a');
+      await test.selectItems('a', 'b');
+      await test.startDrag('a');
+      await test.dragOver('bb');
+      await test.drop();
+      await test.expectTreeUnchanged();
+      await test.expectItemContentsVisibleAndUnchanged('a', 'b', 'bb');
+    });
   });
 });