From dd93ac43d989c4e5850e89ee05fa312c1c7b497a Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Mon, 29 Sep 2025 11:52:49 -0700
Subject: [PATCH] fix: Only add the listeners for DomWidget components once
 (#5846)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fixes the laggy textarea select noted in Discord.

## Changes

- **What**: Fixes the case where a DomWidget that was repeatedly made
visible accumulated as many event listeners as times it was toggled on.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5846-fix-Only-add-the-listeners-for-DomWidget-components-once-27d6d73d3650818382e0d0c565fc862a)
by [Unito](https://www.unito.io)
---
 src/components/graph/widgets/DomWidget.vue | 55 ++++++++++------------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index 6e218d7a1..a0ef64275 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -125,50 +125,43 @@ watch(
     }
   }
 )
-
-// Set up event listeners only after the widget is mounted and visible
-const setupDOMEventListeners = () => {
-  if (!isDOMWidget(widget) || !widgetState.visible) return
-
-  if (widget.element.blur) {
-    useEventListener(document, 'mousedown', (event) => {
-      if (!widget.element.contains(event.target as HTMLElement)) {
-        widget.element.blur()
-      }
-    })
+useEventListener(document, 'mousedown', (event) => {
+  if (!isDOMWidget(widget) || !widgetState.visible || !widget.element.blur) {
+    return
   }
+  if (!widget.element.contains(event.target as HTMLElement)) {
+    widget.element.blur()
+  }
+})
 
-  for (const evt of widget.options.selectOn ?? ['focus', 'click']) {
-    useEventListener(widget.element, evt, () => {
+onMounted(() => {
+  if (!isDOMWidget(widget)) {
+    return
+  }
+  useEventListener(
+    widget.element,
+    widget.options.selectOn ?? ['focus', 'click'],
+    () => {
       const lgCanvas = canvasStore.canvas
       lgCanvas?.selectNode(widget.node)
       lgCanvas?.bringToFront(widget.node)
-    })
-  }
-}
-
-// Set up event listeners when widget becomes visible
-watch(
-  () => widgetState.visible,
-  (visible) => {
-    if (visible) {
-      setupDOMEventListeners()
     }
-  },
-  { immediate: true }
-)
+  )
+})
 
 const inputSpec = widget.node.constructor.nodeData
 const tooltip = inputSpec?.inputs?.[widget.name]?.tooltip
 
 // Mount DOM element when widget is or becomes visible
 const mountElementIfVisible = () => {
-  if (widgetState.visible && isDOMWidget(widget) && widgetElement.value) {
-    // Only append if not already a child
-    if (!widgetElement.value.contains(widget.element)) {
-      widgetElement.value.appendChild(widget.element)
-    }
+  if (!(widgetState.visible && isDOMWidget(widget) && widgetElement.value)) {
+    return
   }
+  // Only append if not already a child
+  if (widgetElement.value.contains(widget.element)) {
+    return
+  }
+  widgetElement.value.appendChild(widget.element)
 }
 
 // Check on mount - but only after next tick to ensure visibility is calculated