From ff59ee317d9c535734b3e2697fc742153e4b2f4f Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Thu, 15 Jan 2026 22:22:05 -0800
Subject: [PATCH] refactor(NodeHeader): use v-model:is-editing and
 doubleClickToEdit, remove handlers

---
 .../extensions/vueNodes/components/NodeHeader.vue | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 0f24cf873..ecfc26279 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -16,7 +16,6 @@
       opacity: useSettingStore().get('Comfy.Node.Opacity') ?? 1
     }"
     :data-testid="`node-header-${nodeData?.id || ''}`"
-    @dblclick="handleDoubleClick"
   >
     <div class="flex items-center justify-between gap-2.5 min-w-0">
       <!-- Collapse/Expand Button -->
@@ -53,11 +52,11 @@
         >
           <div class="truncate min-w-0 flex-1">
             <EditableText
+              v-model:is-editing="isEditing"
               :model-value="displayTitle"
-              :is-editing="isEditing"
               :input-attrs="{ 'data-testid': 'node-title-input' }"
+              double-click-to-edit
               @edit="handleTitleEdit"
-              @cancel="handleTitleCancel"
             />
           </div>
         </div>
@@ -242,23 +241,13 @@ const handleCollapse = () => {
   emit('collapse')
 }
 
-const handleDoubleClick = () => {
-  isEditing.value = true
-}
-
 const handleTitleEdit = (newTitle: string) => {
-  isEditing.value = false
   const trimmedTitle = newTitle.trim()
   if (trimmedTitle && trimmedTitle !== displayTitle.value) {
-    // Emit for litegraph sync
     emit('update:title', trimmedTitle)
   }
 }
 
-const handleTitleCancel = () => {
-  isEditing.value = false
-}
-
 const handleEnterSubgraph = () => {
   emit('enter-subgraph')
 }