diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts index 30dd068ef5..9dbb879423 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts @@ -252,11 +252,13 @@ export function useDragDrop(options: UseDragDropOptions = {}) { if (!isDragging) { isDraggingRef.current = true setIsDragging(true) + } else if (scrollAnimationRef.current === null) { + scrollAnimationRef.current = requestAnimationFrame(handleAutoScroll) } return true }, - [isDragging] + [isDragging, handleAutoScroll] ) const getSiblingItems = useCallback( @@ -616,6 +618,31 @@ export function useDragDrop(options: UseDragDropOptions = {}) { siblingsCacheRef.current.clear() }, []) + useEffect(() => { + if (!isDragging) return + const container = scrollContainerRef.current + if (!container) return + const onLeave = (e: DragEvent) => { + const related = e.relatedTarget as Node | null + if (related && container.contains(related)) return + if (scrollAnimationRef.current !== null) { + cancelAnimationFrame(scrollAnimationRef.current) + scrollAnimationRef.current = null + } + dropIndicatorRef.current = null + setDropIndicator(null) + setHoverFolderId(null) + } + container.addEventListener('dragleave', onLeave) + window.addEventListener('drop', handleDragEnd, true) + window.addEventListener('dragend', handleDragEnd, true) + return () => { + container.removeEventListener('dragleave', onLeave) + window.removeEventListener('drop', handleDragEnd, true) + window.removeEventListener('dragend', handleDragEnd, true) + } + }, [isDragging, handleDragEnd]) + const setScrollContainer = useCallback((element: HTMLDivElement | null) => { scrollContainerRef.current = element }, [])