From 9d8e54a51cf1f800883d19569e6349f121b3bae3 Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Fri, 16 Jan 2026 20:36:36 -0800
Subject: [PATCH] Fix dragndrop subgraph widgets sticking to cursor (#8114)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Under some circumstances, subgraph widgets in the properties panel would
have incorrect drag state
- Debouncing list state would cause a race condition where a double
click would initiate a drag on an element that no longer exists
  - This is solved by removing the debounce.
- Right clicking on widgets would initiate a drag
  - Dragging now explicity requires a primary button click.
Additionally, drag is now ended on `pointercancel`. This is purely for
safety and may not actually be required.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8114-Fix-dragndrop-subgraph-widgets-sticking-to-cursor-2ea6d73d365081f08515e8231bd87bdc)
by [Unito](https://www.unito.io)
---
 .../rightSidePanel/subgraph/SubgraphEditor.vue    | 15 ++++++---------
 src/scripts/ui/draggableList.ts                   |  4 ++++
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
index 7d3d4dcfb..10c05ec16 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { watchDebounced } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import {
   computed,
@@ -7,7 +6,8 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
-  triggerRef
+  triggerRef,
+  watch
 } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -225,13 +225,10 @@ function setDraggableState() {
     activeWidgets.value = aw
   }
 }
-watchDebounced(
-  filteredActive,
-  () => {
-    setDraggableState()
-  },
-  { debounce: 100 }
-)
+watch(filteredActive, () => {
+  setDraggableState()
+})
+
 onMounted(() => {
   setDraggableState()
   if (activeNode.value) pruneDisconnected(activeNode.value)
diff --git a/src/scripts/ui/draggableList.ts b/src/scripts/ui/draggableList.ts
index 895d153b7..0a1fdb5a9 100644
--- a/src/scripts/ui/draggableList.ts
+++ b/src/scripts/ui/draggableList.ts
@@ -72,6 +72,8 @@ export class DraggableList extends EventTarget {
     this.off.push(this.on(document, 'mouseup', this.dragEnd))
     // @ts-expect-error fixme ts strict error
     this.off.push(this.on(document, 'touchend', this.dragEnd))
+    // @ts-expect-error fixme ts strict error
+    this.off.push(this.on(document, 'pointercancel', this.dragEnd))
   }
 
   getAllItems() {
@@ -113,6 +115,8 @@ export class DraggableList extends EventTarget {
 
   // @ts-expect-error fixme ts strict error
   dragStart(e) {
+    if (e.button > 0) return
+
     if (e.target.classList.contains(this.handleClass)) {
       this.draggableItem = e.target.closest(this.itemSelector)
     }