fix: reset drag line on drop (#132)

Author: lukasbach

.changeset/dirty-seahorses-watch.md

@@ -0,0 +1,5 @@
+---
+"@headless-tree/core": patch
+---
+
+fixed a bug where ending drag without successful drop doesn't properly reset drag line (#132)

packages/core/src/features/drag-and-drop/drag-and-drop.spec.ts

@@ -182,7 +182,7 @@ describe("core-feature/drag-and-drop", () => {
         });
       });
 
-      it("updates dnd state", () => {
+      it("updates dnd state", async () => {
         const setDndState = tree.mockedHandler("setDndState");
         tree.do.startDrag("x111");
         expect(setDndState).toBeCalledWith({
@@ -198,7 +198,7 @@ describe("core-feature/drag-and-drop", () => {
           },
         });
         tree.do.drop("x22");
-        expect(setDndState).toBeCalledWith(null);
+        await vi.waitFor(() => expect(setDndState).toBeCalledWith(null));
       });
     });
 

packages/core/src/features/drag-and-drop/feature.ts

@@ -24,6 +24,19 @@ export const dragAndDropFeature: FeatureImplementation = {
     dnd: "setDndState",
   },
 
+  onTreeMount: (tree) => {
+    const listener = () => {
+      tree.applySubStateUpdate("dnd", null);
+    };
+    tree.getDataRef<DndDataRef>().current.windowDragEndListener = listener;
+    window.addEventListener("dragend", listener);
+  },
+  onTreeUnmount: (tree) => {
+    const { windowDragEndListener } = tree.getDataRef<DndDataRef>().current;
+    if (!windowDragEndListener) return;
+    window.removeEventListener("dragend", windowDragEndListener);
+  },
+
   treeInstance: {
     getDragTarget: ({ tree }) => {
       return tree.getState().dnd?.dragTarget ?? null;
@@ -106,7 +119,6 @@ export const dragAndDropFeature: FeatureImplementation = {
           const draggedItems = tree.getState().dnd?.draggedItems;
 
           dataRef.current.lastDragCode = undefined;
-          tree.applySubStateUpdate("dnd", null);
 
           if (draggedItems) {
             await config.onDrop?.(draggedItems, target);
@@ -211,7 +223,6 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       onDragEnd: (e: DragEvent) => {
         const draggedItems = tree.getState().dnd?.draggedItems;
-        tree.applySubStateUpdate("dnd", null);
 
         if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
           return;
@@ -234,7 +245,6 @@ export const dragAndDropFeature: FeatureImplementation = {
         const draggedItems = tree.getState().dnd?.draggedItems;
 
         dataRef.current.lastDragCode = undefined;
-        tree.applySubStateUpdate("dnd", null);
 
         if (draggedItems) {
           await config.onDrop?.(draggedItems, target);

packages/core/src/features/drag-and-drop/types.ts

@@ -3,6 +3,7 @@ import { ItemInstance, SetStateFn } from "../../types/core";
 export interface DndDataRef {
   lastDragCode?: string;
   lastAllowDrop?: boolean;
+  windowDragEndListener?: () => void;
 }
 
 export interface DndState<T> {

packages/core/src/test-utils/test-tree-do.ts

@@ -105,12 +105,14 @@ export class TestTreeDo<T> {
   dragEnd(itemId: string, event?: DragEvent) {
     const e = event ?? TestTree.dragEvent();
     this.itemProps(itemId).onDragEnd(e);
+    window.dispatchEvent(new CustomEvent("dragend"));
     return e;
   }
 
   async drop(itemId: string, event?: DragEvent) {
     const e = event ?? TestTree.dragEvent();
     await this.itemProps(itemId).onDrop(e);
+    window.dispatchEvent(new CustomEvent("dragend"));
     return e;
   }
 

packages/core/src/test-utils/test-tree.ts

@@ -137,6 +137,7 @@ export class TestTree<T = string> {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     this.instance;
     await this.resolveAsyncVisibleItems();
+    this.instance.registerElement({ getBoundingClientRect: () => null } as any);
     return this;
   }
 

packages/core/vitest.config.ts

@@ -2,5 +2,7 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-  test: {},
+  test: {
+    environment: "jsdom",
+  },
 });

packages/sb-react/src/dnd/drag-inside.stories.tsx

@@ -50,7 +50,8 @@ export const DragInside = () => {
         )}" on ${JSON.stringify(target)}`,
       );
     },
-    canDropForeignDragObject: (_, target) => target.item.isFolder(),
+    canDropForeignDragObject: (_, target) =>
+      target.item.isFolder() && target.item.getId() !== "drinks",
     indent: 20,
     dataLoader: syncDataLoader,
     features: [
@@ -94,7 +95,7 @@ export const DragInside = () => {
           e.dataTransfer.setData("text/plain", "hello world");
         }}
       >
-        Drag me into the tree!
+        Drag me into the tree! (but not in Drinks)
       </div>
     </>
   );