refactor: replace comfy built-in text widget with custome autocomplete text widget for better event handler binding

- Change `STRING` input type to `AUTOCOMPLETE_TEXT_LORAS` in LoraManagerLoader, LoraStacker, and WanVideoLoraSelectLM nodes for LoRA syntax input
- Change `STRING` input type to `AUTOCOMPLETE_TEXT_EMBEDDINGS` in PromptLoraManager node for prompt input
- Remove manual multiline, autocomplete, and dynamicPrompts configurations in favor of built-in autocomplete types
- Update placeholder text for consistency across nodes
- Remove unused `setupInputWidgetWithAutocomplete` mock from frontend tests
- Add Vue app cleanup logic to prevent memory leaks in widget management

vue-widgets/src/components/AutocompleteTextWidget.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="autocomplete-text-widget">
+    <textarea
+      ref="textareaRef"
+      v-model="textValue"
+      :placeholder="placeholder"
+      :spellcheck="spellcheck ?? false"
+      :class="['text-input', { 'vue-dom-mode': isVueDomMode }]"
+      @input="onInput"
+      @pointerdown.stop
+      @pointermove.stop
+      @pointerup.stop
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useAutocomplete } from '@/composables/useAutocomplete'
+
+// Access LiteGraph global for initial mode detection
+declare const LiteGraph: { vueNodesMode?: boolean } | undefined
+
+export interface AutocompleteTextWidgetInterface {
+  serializeValue?: () => Promise<string>
+  value?: string
+  onSetValue?: (v: string) => void
+  callback?: (v: string) => void
+}
+
+const props = defineProps<{
+  widget: AutocompleteTextWidgetInterface
+  node: { id: number }
+  modelType?: 'loras' | 'embeddings'
+  placeholder?: string
+  showPreview?: boolean
+  spellcheck?: boolean
+}>()
+
+// Reactive ref for Vue DOM mode
+const isVueDomMode = ref(typeof LiteGraph !== 'undefined' && LiteGraph.vueNodesMode === true)
+
+// Listen for mode change events from main.ts
+const onModeChange = (event: Event) => {
+  const customEvent = event as CustomEvent<{ isVueDomMode: boolean }>
+  isVueDomMode.value = customEvent.detail.isVueDomMode
+}
+
+onMounted(() => {
+  // Listen for custom event dispatched by main.ts
+  document.addEventListener('lora-manager:vue-mode-change', onModeChange)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('lora-manager:vue-mode-change', onModeChange)
+})
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const textValue = ref('')
+
+// Initialize autocomplete with direct ref access
+const { isInitialized } = useAutocomplete(
+  textareaRef,
+  props.modelType ?? 'loras',
+  { showPreview: props.showPreview ?? true }
+)
+
+const onInput = () => {
+  // Call widget callback when text changes
+  if (typeof props.widget.callback === 'function') {
+    props.widget.callback(textValue.value)
+  }
+}
+
+onMounted(() => {
+  // Setup serialization
+  props.widget.serializeValue = async () => textValue.value
+
+  // Handle external value updates (e.g., loading workflow, paste)
+  props.widget.onSetValue = (v: string) => {
+    if (v !== textValue.value) {
+      textValue.value = v ?? ''
+    }
+  }
+
+  // Restore from saved value if exists
+  if (props.widget.value !== undefined && props.widget.value !== null) {
+    textValue.value = props.widget.value
+  }
+})
+
+// Watch for external value changes and sync
+watch(
+  () => props.widget.value,
+  (newValue) => {
+    if (newValue !== undefined && newValue !== textValue.value) {
+      textValue.value = newValue ?? ''
+    }
+  }
+)
+</script>
+
+<style scoped>
+.autocomplete-text-widget {
+  background: transparent;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+/* Canvas mode styles (default) - matches built-in comfy-multiline-input */
+.text-input {
+  flex: 1;
+  width: 100%;
+  background-color: var(--comfy-input-bg, #222);
+  color: var(--input-text, #ddd);
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 2px;
+  resize: none;
+  border: none;
+  border-radius: 0;
+  box-sizing: border-box;
+  font-size: var(--comfy-textarea-font-size, 10px);
+  font-family: monospace;
+}
+
+/* Vue DOM mode styles - matches built-in p-textarea in Vue DOM mode */
+.text-input.vue-dom-mode {
+  background-color: var(--color-charcoal-400, #313235);
+  color: #fff;
+  padding: 24px 12px 8px;
+  margin: 0 0 4px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+.text-input:focus {
+  outline: none;
+}
+</style>

vue-widgets/src/composables/useAutocomplete.ts

@@ -0,0 +1,110 @@
+import { ref, onMounted, onUnmounted, type Ref } from 'vue'
+
+// Dynamic import type for AutoComplete class
+type AutoCompleteClass = new (
+  inputElement: HTMLTextAreaElement,
+  modelType: 'loras' | 'embeddings',
+  options?: AutocompleteOptions
+) => AutoCompleteInstance
+
+interface AutocompleteOptions {
+  maxItems?: number
+  minChars?: number
+  debounceDelay?: number
+  showPreview?: boolean
+}
+
+interface AutoCompleteInstance {
+  destroy: () => void
+  isValid: () => boolean
+  refreshCaretHelper: () => void
+}
+
+export interface UseAutocompleteOptions {
+  showPreview?: boolean
+  maxItems?: number
+  minChars?: number
+  debounceDelay?: number
+}
+
+export function useAutocomplete(
+  textareaRef: Ref<HTMLTextAreaElement | null>,
+  modelType: 'loras' | 'embeddings' = 'loras',
+  options: UseAutocompleteOptions = {}
+) {
+  const autocompleteInstance = ref<AutoCompleteInstance | null>(null)
+  const isInitialized = ref(false)
+
+  const defaultOptions: AutocompleteOptions = {
+    maxItems: 20,
+    minChars: 1,
+    debounceDelay: 200,
+    showPreview: true,
+    ...options
+  }
+
+  const initAutocomplete = async () => {
+    if (!textareaRef.value) {
+      console.warn('[useAutocomplete] Textarea ref is null, cannot initialize')
+      return
+    }
+
+    if (autocompleteInstance.value) {
+      console.log('[useAutocomplete] Already initialized, skipping')
+      return
+    }
+
+    try {
+      // Dynamically import the AutoComplete class
+      const module = await import(/* @vite-ignore */ `${'../autocomplete.js'}`)
+      const AutoComplete: AutoCompleteClass = module.AutoComplete
+
+      autocompleteInstance.value = new AutoComplete(
+        textareaRef.value,
+        modelType,
+        defaultOptions
+      )
+      isInitialized.value = true
+      console.log(`[useAutocomplete] Initialized for ${modelType}`)
+    } catch (error) {
+      console.error('[useAutocomplete] Failed to initialize:', error)
+    }
+  }
+
+  const destroyAutocomplete = () => {
+    if (autocompleteInstance.value) {
+      autocompleteInstance.value.destroy()
+      autocompleteInstance.value = null
+      isInitialized.value = false
+      console.log('[useAutocomplete] Destroyed')
+    }
+  }
+
+  const refreshCaretHelper = () => {
+    if (autocompleteInstance.value) {
+      autocompleteInstance.value.refreshCaretHelper()
+    }
+  }
+
+  onMounted(() => {
+    // Initialize autocomplete after component is mounted
+    // Use nextTick-like delay to ensure DOM is fully ready
+    setTimeout(() => {
+      initAutocomplete()
+    }, 0)
+  })
+
+  onUnmounted(() => {
+    destroyAutocomplete()
+  })
+
+  return {
+    autocompleteInstance,
+    isInitialized,
+    initAutocomplete,
+    destroyAutocomplete,
+    refreshCaretHelper
+  }
+}
+
+export type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>

vue-widgets/src/main.ts

@@ -4,6 +4,7 @@ import LoraPoolWidget from '@/components/LoraPoolWidget.vue'
 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 type { LoraPoolConfig, LegacyLoraPoolConfig, RandomizerConfig, CyclerConfig } from './composables/types'
 import {
   setupModeChangeHandler,
@@ -21,6 +22,7 @@ const LORA_CYCLER_WIDGET_MIN_HEIGHT = 314
 const LORA_CYCLER_WIDGET_MAX_HEIGHT = LORA_CYCLER_WIDGET_MIN_HEIGHT
 const JSON_DISPLAY_WIDGET_MIN_WIDTH = 300
 const JSON_DISPLAY_WIDGET_MIN_HEIGHT = 200
+const AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT = 60
 
 // @ts-ignore - ComfyUI external module
 import { app } from '../../../scripts/app.js'
@@ -369,6 +371,119 @@ function createJsonDisplayWidget(node) {
   return { widget }
 }
 
+// Store nodeData options per widget type for autocomplete widgets
+const widgetInputOptions: Map<string, { placeholder?: string }> = new Map()
+
+// Listen for Vue DOM mode setting changes and dispatch custom event
+const initVueDomModeListener = () => {
+  if (app.ui?.settings?.addEventListener) {
+    app.ui.settings.addEventListener('Comfy.VueNodes.Enabled.change', () => {
+      // Use requestAnimationFrame to ensure the setting value has been updated
+      // before we read it (the event may fire before internal state updates)
+      requestAnimationFrame(() => {
+        const isVueDomMode = app.ui?.settings?.getSettingValue?.('Comfy.VueNodes.Enabled') ?? false
+        // Dispatch custom event for Vue components to listen to
+        document.dispatchEvent(new CustomEvent('lora-manager:vue-mode-change', {
+          detail: { isVueDomMode }
+        }))
+      })
+    })
+  }
+}
+
+// Initialize listener when app is ready
+if (app.ui?.settings) {
+  initVueDomModeListener()
+} else {
+  // Defer until app is ready
+  const checkAppReady = setInterval(() => {
+    if (app.ui?.settings) {
+      initVueDomModeListener()
+      clearInterval(checkAppReady)
+    }
+  }, 100)
+}
+
+// Factory function for creating autocomplete text widgets
+// @ts-ignore
+function createAutocompleteTextWidgetFactory(
+  node: any,
+  widgetName: string,
+  modelType: 'loras' | 'embeddings',
+  inputOptions: { placeholder?: string } = {}
+) {
+  const container = document.createElement('div')
+  container.id = `autocomplete-text-widget-${node.id}-${widgetName}`
+  container.style.width = '100%'
+  container.style.height = '100%'
+  container.style.display = 'flex'
+  container.style.flexDirection = 'column'
+  container.style.overflow = 'hidden'
+
+  forwardMiddleMouseToCanvas(container)
+
+  let internalValue = ''
+
+  const widget = node.addDOMWidget(
+    widgetName,
+    `AUTOCOMPLETE_TEXT_${modelType.toUpperCase()}`,
+    container,
+    {
+      getValue() {
+        return internalValue
+      },
+      setValue(v: string) {
+        internalValue = v ?? ''
+        if (typeof widget.onSetValue === 'function') {
+          widget.onSetValue(v)
+        }
+      },
+      serialize: true,
+      getMinHeight() {
+        return AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT
+      }
+    }
+  )
+
+  // Get spellcheck setting from ComfyUI settings (default: false)
+  const spellcheck = app.ui?.settings?.getSettingValue?.('Comfy.TextareaWidget.Spellcheck') ?? false
+
+  const vueApp = createApp(AutocompleteTextWidget, {
+    widget,
+    node,
+    modelType,
+    placeholder: inputOptions.placeholder || widgetName,
+    showPreview: true,
+    spellcheck
+  })
+
+  vueApp.use(PrimeVue, {
+    unstyled: true,
+    ripple: false
+  })
+
+  vueApp.mount(container)
+  // Use a unique key combining node.id and widget name to avoid collisions
+  const appKey = node.id * 100000 + widgetName.charCodeAt(0)
+  vueApps.set(appKey, vueApp)
+
+  widget.computeLayoutSize = () => {
+    const minHeight = AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT
+
+    return { minHeight }
+  }
+
+  widget.onRemove = () => {
+    const vueApp = vueApps.get(appKey)
+    if (vueApp) {
+      vueApp.unmount()
+      vueApps.delete(appKey)
+    }
+  }
+
+  return { widget }
+}
+
 app.registerExtension({
   name: 'LoraManager.VueWidgets',
 
@@ -402,16 +517,40 @@ app.registerExtension({
         } : null
 
         return addLorasWidgetCache(node, 'loras', { isRandomizerNode }, callback)
+      },
+      // Autocomplete text widget for LoRAs (used by Lora Loader, Lora Stacker, WanVideo Lora Select)
+      // @ts-ignore
+      AUTOCOMPLETE_TEXT_LORAS(node) {
+        const options = widgetInputOptions.get(`${node.comfyClass}:text`) || {}
+        return createAutocompleteTextWidgetFactory(node, 'text', 'loras', options)
+      },
+      // Autocomplete text widget for embeddings (used by Prompt node)
+      // @ts-ignore
+      AUTOCOMPLETE_TEXT_EMBEDDINGS(node) {
+        const options = widgetInputOptions.get(`${node.comfyClass}:text`) || {}
+        return createAutocompleteTextWidgetFactory(node, 'text', 'embeddings', options)
       }
     }
   },
 
   // Add display-only widget to Debug Metadata node
   // Register mode change handlers for LoRA provider nodes
+  // Extract and store input options for autocomplete widgets
   // @ts-ignore
   async beforeRegisterNodeDef(nodeType, nodeData) {
     const comfyClass = nodeType.comfyClass
 
+    // Extract and store input options for autocomplete widgets
+    const inputs = { ...nodeData.input?.required, ...nodeData.input?.optional }
+    for (const [inputName, inputDef] of Object.entries(inputs)) {
+      // @ts-ignore
+      if (Array.isArray(inputDef) && typeof inputDef[0] === 'string' && inputDef[0].startsWith('AUTOCOMPLETE_TEXT_')) {
+        // @ts-ignore
+        const options = inputDef[1] || {}
+        widgetInputOptions.set(`${nodeData.name}:${inputName}`, options)
+      }
+    }
+
     // Register mode change handlers for LoRA provider nodes
     if (LORA_PROVIDER_NODE_TYPES.includes(comfyClass)) {
       const originalOnNodeCreated = nodeType.prototype.onNodeCreated

vue-widgets/vite.config.mts

@@ -22,7 +22,8 @@ export default defineConfig({
         rollupOptions: {
             external: [
                 '../../../scripts/app.js',
-                '../loras_widget.js'
+                '../loras_widget.js',
+                '../autocomplete.js'
             ],
             output: {
                 dir: '../web/comfyui/vue-widgets',