fix(widgets): isolate autocomplete text cleanup

vue-widgets/src/main.ts

@@ -5,6 +5,7 @@ import LoraRandomizerWidget from '@/components/LoraRandomizerWidget.vue'
 import LoraCyclerWidget from '@/components/LoraCyclerWidget.vue'
 import JsonDisplayWidget from '@/components/JsonDisplayWidget.vue'
 import AutocompleteTextWidget from '@/components/AutocompleteTextWidget.vue'
+import { createVueWidgetCleanup } from './vue-widget-cleanup'
 import type { LoraPoolConfig, RandomizerConfig, CyclerConfig } from './composables/types'
 import {
   setupModeChangeHandler,
@@ -66,6 +67,12 @@ function forwardMiddleMouseToCanvas(container: HTMLElement) {
 }
 
 const vueApps = new Map<number, VueApp>()
+let autocompleteTextWidgetInstanceId = 0
+
+export function createAutocompleteTextWidgetInstanceId() {
+  autocompleteTextWidgetInstanceId += 1
+  return autocompleteTextWidgetInstanceId
+}
 
 // Cache for dynamically loaded addLorasWidget module
 let addLorasWidgetCache: any = null
@@ -562,8 +569,9 @@ function createAutocompleteTextWidgetFactory(
   inputOptions: { placeholder?: string } = {}
 ) {
   const metadataWidgetName = `__lm_autocomplete_meta_${widgetName}`
+  const instanceId = createAutocompleteTextWidgetInstanceId()
   const container = document.createElement('div')
-  container.id = `autocomplete-text-widget-${node.id}-${widgetName}`
+  container.id = `autocomplete-text-widget-${instanceId}`
   container.style.width = '100%'
   container.style.height = '100%'
   container.style.display = 'flex'
@@ -644,17 +652,12 @@ function createAutocompleteTextWidgetFactory(
   })
 
   vueApp.mount(container)
-  // Use a unique key combining node.id and widget name to avoid collisions
-  const appKey = node.id * 100000 + widgetName.charCodeAt(0)
+  const appKey = instanceId
   vueApps.set(appKey, vueApp)
 
-  widget.onRemove = () => {
-    const vueApp = vueApps.get(appKey)
-    if (vueApp) {
-      vueApp.unmount()
-      vueApps.delete(appKey)
-    }
-  }
+  widget.onRemove = createVueWidgetCleanup(vueApp, () => {
+    vueApps.delete(appKey)
+  })
 
   return { widget }
 }

vue-widgets/src/vue-widget-cleanup.ts

@@ -0,0 +1,15 @@
+import type { App as VueApp } from 'vue'
+
+export function createVueWidgetCleanup(vueApp: VueApp, onCleanup?: () => void) {
+  let didUnmount = false
+
+  return () => {
+    if (didUnmount) {
+      return
+    }
+
+    vueApp.unmount()
+    didUnmount = true
+    onCleanup?.()
+  }
+}

vue-widgets/tests/unit/vueWidgetCleanup.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createVueWidgetCleanup } from '@/vue-widget-cleanup'
+
+describe('createVueWidgetCleanup', () => {
+  it('cleans up only the Vue app bound to the widget remove handler', () => {
+    const firstCleanup = vi.fn()
+    const secondCleanup = vi.fn()
+    const firstApp = { unmount: vi.fn() }
+    const secondApp = { unmount: vi.fn() }
+
+    const removeFirst = createVueWidgetCleanup(firstApp as any, firstCleanup)
+    const removeSecond = createVueWidgetCleanup(secondApp as any, secondCleanup)
+
+    removeFirst()
+
+    expect(firstApp.unmount).toHaveBeenCalledTimes(1)
+    expect(firstCleanup).toHaveBeenCalledTimes(1)
+    expect(secondApp.unmount).not.toHaveBeenCalled()
+    expect(secondCleanup).not.toHaveBeenCalled()
+
+    removeSecond()
+
+    expect(secondApp.unmount).toHaveBeenCalledTimes(1)
+    expect(secondCleanup).toHaveBeenCalledTimes(1)
+  })
+
+  it('is idempotent when ComfyUI calls the remove handler more than once', () => {
+    const cleanup = vi.fn()
+    const app = { unmount: vi.fn() }
+    const remove = createVueWidgetCleanup(app as any, cleanup)
+
+    remove()
+    remove()
+
+    expect(app.unmount).toHaveBeenCalledTimes(1)
+    expect(cleanup).toHaveBeenCalledTimes(1)
+  })
+})