fix(sidebar): stop bubbled dragleave events cancelling an in-progress drag

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.test.tsx

@@ -102,6 +102,38 @@ function fakeDropEvent(): unknown {
   }
 }
 
+/**
+ * Registers a scroll container spanning x 0-200, then arms a drop indicator on it. Registration has
+ * to precede the first dragOver: the listener effect reads the container ref when `isDragging`
+ * flips, and `setScrollContainer` is a plain ref setter that triggers no re-render of its own.
+ */
+function armDragOverScrollContainer(): HTMLDivElement {
+  const scrollContainer = document.createElement('div')
+  scrollContainer.getBoundingClientRect = () =>
+    ({ left: 0, right: 200, top: 0, bottom: 400 }) as DOMRect
+  document.body.appendChild(scrollContainer)
+  act(() => {
+    latest.setScrollContainer(scrollContainer)
+  })
+  act(() => {
+    latest.createEdgeDropZone('workflow-1', 'before').onDragOver(fakeDragOverEvent() as never)
+  })
+  return scrollContainer
+}
+
+/** Chrome's `dragleave` shape: bubbles, and always reports a null `relatedTarget`. */
+function dispatchBubbledDragLeave(element: HTMLElement, clientX: number) {
+  act(() => {
+    const leave = new Event('dragleave', { bubbles: true }) as DragEvent
+    Object.defineProperties(leave, {
+      relatedTarget: { value: null },
+      clientX: { value: clientX },
+      clientY: { value: 200 },
+    })
+    element.dispatchEvent(leave)
+  })
+}
+
 let container: HTMLDivElement
 let root: Root
 
@@ -136,7 +168,6 @@ describe('useDragDrop stranded-drag reset', () => {
   })
 
   it('clears isDragging on a window dragend when no drop fired', () => {
-    // A drag entering the list flips isDragging on via initDragOver.
     act(() => {
       latest.createRootDropZone().onDragOver(fakeDragOverEvent() as never)
     })
@@ -149,13 +180,70 @@ describe('useDragDrop stranded-drag reset', () => {
     expect(latest.isDragging).toBe(false)
   })
 
+  /**
+   * `dragleave` bubbles and Chrome nulls its `relatedTarget`, so the container listener sees one
+   * for every descendant boundary the pointer crosses. Treating those as "left the list" wiped the
+   * drop indicator mid-drag, and `handleDrop` bails on a null indicator — so a release just after
+   * crossing a boundary did nothing at all. Nested rows in an expanded folder cross the most
+   * boundaries, which is why open folders looked like they broke dragging outright.
+   */
+  it('keeps the drop indicator when a bubbled dragleave has no relatedTarget but the pointer is still inside', () => {
+    const scrollContainer = armDragOverScrollContainer()
+    expect(latest.dropIndicator).toEqual({
+      targetId: 'workflow-1',
+      position: 'before',
+      folderId: null,
+    })
+
+    // A child row handing off to its sibling: pointer still well inside the list's 0-200 x-range.
+    dispatchBubbledDragLeave(scrollContainer, 100)
+
+    expect(latest.dropIndicator).not.toBeNull()
+    scrollContainer.remove()
+  })
+
+  /**
+   * The root drop zone's own `onDragLeave` clears the indicator through `isLeavingElement`, which
+   * made the same null-`relatedTarget` assumption. Fixing only the container listener would have
+   * left this second path clearing the indicator on every internal crossing.
+   */
+  it('keeps the drop indicator when the root drop zone sees a relatedTarget-less dragleave inside itself', () => {
+    const zone = document.createElement('div')
+    zone.getBoundingClientRect = () => ({ left: 0, right: 200, top: 0, bottom: 400 }) as DOMRect
+
+    act(() => {
+      latest.createEdgeDropZone('workflow-1', 'before').onDragOver(fakeDragOverEvent() as never)
+    })
+    expect(latest.dropIndicator).not.toBeNull()
+
+    act(() => {
+      latest.createRootDropZone().onDragLeave({
+        relatedTarget: null,
+        currentTarget: zone,
+        clientX: 100,
+        clientY: 200,
+      } as never)
+    })
+
+    expect(latest.dropIndicator).not.toBeNull()
+  })
+
+  it('clears the drop indicator when the pointer genuinely leaves the list', () => {
+    const scrollContainer = armDragOverScrollContainer()
+    expect(latest.dropIndicator).not.toBeNull()
+
+    dispatchBubbledDragLeave(scrollContainer, 900)
+
+    expect(latest.dropIndicator).toBeNull()
+    scrollContainer.remove()
+  })
+
   it('keeps isDragging active across dragOver updates until the drag ends', () => {
     act(() => {
       latest.createRootDropZone().onDragOver(fakeDragOverEvent() as never)
     })
     expect(latest.isDragging).toBe(true)
 
-    // A subsequent dragOver must not tear down the active drag.
     act(() => {
       latest.createRootDropZone().onDragOver(fakeDragOverEvent() as never)
     })
@@ -227,7 +315,7 @@ describe('useDragDrop spring-open revert', () => {
     dragOverFolderUntilExpanded()
     mockSetExpanded.mockClear()
 
-    // Drop inside folder-1, then the drag ends as it always does.
+    // `dragend` fires after every drop, so the revert path runs here too.
     act(() => {
       void latest.createFolderDragHandlers('folder-1', null).onDrop(fakeDropEvent() as never)
     })