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

py/nodes/lora_loader.py

@@ -16,12 +16,9 @@ class LoraManagerLoader:
             "required": {
                 "model": ("MODEL",),
                 # "clip": ("CLIP",),
-                "text": ("STRING", {
+                "text": ("AUTOCOMPLETE_TEXT_LORAS", {
-                    "multiline": True,
+                    "placeholder": "Type LoRA syntax...",
-                    "pysssss.autocomplete": False, 
-                    "dynamicPrompts": True, 
                     "tooltip": "Format: <lora:lora_name:strength> separated by spaces or punctuation",
-                    "placeholder": "LoRA syntax input: <lora:name:strength>"
                 }),
             },
             "optional": FlexibleOptionalInputType(any_type),

py/nodes/lora_stacker.py

@@ -14,12 +14,9 @@ class LoraStacker:
     def INPUT_TYPES(cls):
         return {
             "required": {
-                "text": ("STRING", {
+                "text": ("AUTOCOMPLETE_TEXT_LORAS", {
-                    "multiline": True, 
+                    "placeholder": "Type LoRA syntax...",
-                    "pysssss.autocomplete": False, 
-                    "dynamicPrompts": True, 
                     "tooltip": "Format: <lora:lora_name:strength> separated by spaces or punctuation",
-                    "placeholder": "LoRA syntax input: <lora:name:strength>"
                 }),
             },
             "optional": FlexibleOptionalInputType(any_type),

py/nodes/prompt.py

@@ -15,11 +15,9 @@ class PromptLoraManager:
         return {
             "required": {
                 "text": (
-                    'STRING',
+                    "AUTOCOMPLETE_TEXT_EMBEDDINGS",
                     {
-                        "multiline": True,
+                        "placeholder": "Enter prompt...",
-                        "pysssss.autocomplete": False, 
-                        "dynamicPrompts": True,
                         "tooltip": "The text to be encoded.",
                     },
                 ),

py/nodes/wanvideo_lora_select.py

@@ -15,12 +15,9 @@ class WanVideoLoraSelectLM:
             "required": {
                 "low_mem_load": ("BOOLEAN", {"default": False, "tooltip": "Load LORA models with less VRAM usage, slower loading. This affects ALL LoRAs, not just the current ones. No effect if merge_loras is False"}),
                 "merge_loras": ("BOOLEAN", {"default": True, "tooltip": "Merge LoRAs into the model, otherwise they are loaded on the fly. Always disabled for GGUF and scaled fp8 models. This affects ALL LoRAs, not just the current one"}),
-                "text": ("STRING", {
+                "text": ("AUTOCOMPLETE_TEXT_LORAS", {
-                    "multiline": True, 
+                    "placeholder": "Type LoRA syntax...",
-                    "pysssss.autocomplete": False, 
-                    "dynamicPrompts": True, 
                     "tooltip": "Format: <lora:lora_name:strength> separated by spaces or punctuation",
-                    "placeholder": "LoRA syntax input: <lora:name:strength>"
                 }),
             },
             "optional": FlexibleOptionalInputType(any_type),

tests/frontend/components/loraLoader.triggerWords.test.js

@@ -35,7 +35,6 @@ vi.mock(API_MODULE, () => ({
 const collectActiveLorasFromChain = vi.fn();
 const updateConnectedTriggerWords = vi.fn();
 const mergeLoras = vi.fn();
-const setupInputWidgetWithAutocomplete = vi.fn();
 const getAllGraphNodes = vi.fn();
 const getNodeFromGraph = vi.fn();
 
@@ -43,7 +42,6 @@ vi.mock(UTILS_MODULE, () => ({
   collectActiveLorasFromChain,
   updateConnectedTriggerWords,
   mergeLoras,
-  setupInputWidgetWithAutocomplete,
   chainCallback: (proto, property, callback) => {
     proto[property] = callback;
   },
@@ -73,11 +71,6 @@ describe("Lora Loader trigger word updates", () => {
     mergeLoras.mockClear();
     mergeLoras.mockImplementation(() => [{ name: "Alpha", active: true }]);
 
-    setupInputWidgetWithAutocomplete.mockClear();
-    setupInputWidgetWithAutocomplete.mockImplementation(
-      (_node, _widget, originalCallback) => originalCallback
-    );
-
     addLorasWidget.mockClear();
     addLorasWidget.mockImplementation((_node, _name, _opts, callback) => ({
       widget: { value: [], callback },
@@ -94,27 +87,31 @@ describe("Lora Loader trigger word updates", () => {
     const nodeType = { comfyClass: "Lora Loader (LoraManager)", prototype: {} };
     await extension.beforeRegisterNodeDef(nodeType, {}, {});
 
+    // Create mock widget (AUTOCOMPLETE_TEXT_LORAS type created by Vue widgets)
+    const inputWidget = {
+      value: "",
+      options: {},
+      callback: null, // Will be set by onNodeCreated
+    };
+
     const node = {
       comfyClass: "Lora Loader (LoraManager)",
-      widgets: [
+      widgets: [inputWidget],
-        {
-          value: "",
-          options: {},
-          inputEl: {},
-        },
-      ],
       addInput: vi.fn(),
       graph: {},
     };
 
     nodeType.prototype.onNodeCreated.call(node);
 
-    expect(setupInputWidgetWithAutocomplete).toHaveBeenCalled();
+    // The widget is now the AUTOCOMPLETE_TEXT_LORAS type, created automatically by Vue widgets
+    expect(node.inputWidget).toBe(inputWidget);
     expect(node.lorasWidget).toBeDefined();
 
-    const inputCallback = node.widgets[0].callback;
+    // The callback should have been set up by onNodeCreated
+    const inputCallback = inputWidget.callback;
     expect(typeof inputCallback).toBe("function");
 
+    // Simulate typing in the input widget
     inputCallback("<lora:Alpha:1.0>");
 
     expect(mergeLoras).toHaveBeenCalledWith("<lora:Alpha:1.0>", []);
@@ -128,4 +125,3 @@ describe("Lora Loader trigger word updates", () => {
     expect([...triggerWordSet]).toEqual(["Alpha"]);
   });
 });
-

tests/frontend/components/nodeModeChange.test.js

@@ -7,7 +7,6 @@ const {
   LORAS_WIDGET_MODULE,
   LORA_LOADER_MODULE,
   LORA_STACKER_MODULE,
-  VUE_WIDGETS_MODULE,
 } = vi.hoisted(() => ({
   APP_MODULE: new URL("../../../scripts/app.js", import.meta.url).pathname,
   API_MODULE: new URL("../../../scripts/api.js", import.meta.url).pathname,
@@ -15,21 +14,17 @@ const {
   LORAS_WIDGET_MODULE: new URL("../../../web/comfyui/loras_widget.js", import.meta.url).pathname,
   LORA_LOADER_MODULE: new URL("../../../web/comfyui/lora_loader.js", import.meta.url).pathname,
   LORA_STACKER_MODULE: new URL("../../../web/comfyui/lora_stacker.js", import.meta.url).pathname,
-  VUE_WIDGETS_MODULE: new URL("../../../web/comfyui/vue-widgets/lora-manager-widgets.js", import.meta.url).pathname,
 }));
 
 const extensionState = {
   loraLoader: null,
   loraStacker: null,
-  vueWidgets: null,
 };
 const registerExtensionMock = vi.fn((extension) => {
   if (extension.name === "LoraManager.LoraLoader") {
     extensionState.loraLoader = extension;
   } else if (extension.name === "LoraManager.LoraStacker") {
     extensionState.loraStacker = extension;
-  } else if (extension.name === "LoraManager.VueWidgets") {
-    extensionState.vueWidgets = extension;
   }
 });
 
@@ -51,7 +46,6 @@ const updateConnectedTriggerWords = vi.fn();
 const updateDownstreamLoaders = vi.fn();
 const getActiveLorasFromNode = vi.fn();
 const mergeLoras = vi.fn();
-const setupInputWidgetWithAutocomplete = vi.fn();
 const getAllGraphNodes = vi.fn();
 const getNodeFromGraph = vi.fn();
 const getNodeKey = vi.fn();
@@ -69,7 +63,6 @@ vi.mock(UTILS_MODULE, async (importOriginal) => {
     updateDownstreamLoaders,
     getActiveLorasFromNode,
     mergeLoras,
-    setupInputWidgetWithAutocomplete,
     chainCallback,
     getAllGraphNodes,
     getNodeFromGraph,
@@ -90,7 +83,6 @@ describe("Node mode change handling", () => {
 
     extensionState.loraLoader = null;
     extensionState.loraStacker = null;
-    extensionState.vueWidgets = null;
     registerExtensionMock.mockClear();
 
     collectActiveLorasFromChain.mockClear();
@@ -106,11 +98,6 @@ describe("Node mode change handling", () => {
     mergeLoras.mockClear();
     mergeLoras.mockImplementation(() => [{ name: "Alpha", active: true }]);
 
-    setupInputWidgetWithAutocomplete.mockClear();
-    setupInputWidgetWithAutocomplete.mockImplementation(
-      (_node, _widget, originalCallback) => originalCallback
-    );
-
     addLorasWidget.mockClear();
     addLorasWidget.mockImplementation((_node, _name, _opts, callback) => ({
       widget: { value: [], callback },
@@ -118,33 +105,27 @@ describe("Node mode change handling", () => {
   });
 
   describe("Lora Stacker mode change handling", () => {
-    let node, extension, vueWidgetsExtension;
+    let node, extension;
 
     beforeEach(async () => {
-      // Import the Vue widgets module first to register mode change handlers
-      await import(VUE_WIDGETS_MODULE);
-
       await import(LORA_STACKER_MODULE);
 
       expect(registerExtensionMock).toHaveBeenCalled();
       extension = extensionState.loraStacker;
       expect(extension).toBeDefined();
-      vueWidgetsExtension = extensionState.vueWidgets;
-      expect(vueWidgetsExtension).toBeDefined();
 
       const nodeType = { comfyClass: "Lora Stacker (LoraManager)", prototype: {} };
       const nodeData = { name: "Lora Stacker (LoraManager)" };
 
-      // Call both extensions' beforeRegisterNodeDef
       await extension.beforeRegisterNodeDef(nodeType, nodeData, {});
-      await vueWidgetsExtension.beforeRegisterNodeDef(nodeType, nodeData, {});
 
       // Create widgets with proper structure for lora_stacker.js
+      // Widget at index 0 is the AUTOCOMPLETE_TEXT_LORAS widget (created by Vue widgets)
       const inputWidget = {
-        name: "input",
+        name: "text",
         value: "",
-        options: {}, // lora_stacker.js:35 expects options to exist
+        options: {},
-        callback: () => {},
+        callback: null, // Will be set by onNodeCreated
       };
 
       const lorasWidget = {
@@ -173,12 +154,6 @@ describe("Node mode change handling", () => {
       const initialMode = node.mode;
       expect(initialMode).toBe(0);
 
-      // Verify that the mode property is configured as a custom property descriptor
-      // (set up by the mode change handler from Vue widgets)
-      const modeDescriptor = Object.getOwnPropertyDescriptor(node, 'mode');
-      expect(modeDescriptor).toBeDefined();
-      expect(modeDescriptor.set).toBeInstanceOf(Function);
-
       // Change mode from 0 to 3
       node.mode = 3;
 
@@ -187,14 +162,7 @@ describe("Node mode change handling", () => {
     });
 
     it("should update trigger words based on node activity when mode changes", () => {
-      // The loras widget has Alpha and Beta as active
+      // Change to active mode (0)
-      const activeLoras = new Set(["Alpha", "Beta"]);
-
-      // Verify that the mode property is configured with a custom setter
-      const modeDescriptor = Object.getOwnPropertyDescriptor(node, 'mode');
-      expect(modeDescriptor?.set).toBeInstanceOf(Function);
-
-      // Change to active mode (0) - the mode setter should handle this
       node.mode = 0;
       expect(node.mode).toBe(0);
 
@@ -221,13 +189,14 @@ describe("Node mode change handling", () => {
       const nodeType = { comfyClass: "Lora Loader (LoraManager)", prototype: {} };
       await extension.beforeRegisterNodeDef(nodeType, {}, {});
 
+      // Widget at index 0 is the AUTOCOMPLETE_TEXT_LORAS widget (created by Vue widgets)
       node = {
         comfyClass: "Lora Loader (LoraManager)",
         widgets: [
           {
             value: "",
             options: {},
-            callback: () => {},
+            callback: null, // Will be set by onNodeCreated
           },
         ],
         addInput: vi.fn(),
@@ -291,4 +260,4 @@ describe("Node mode change handling", () => {
       );
     });
   });
-});
+});

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',

web/comfyui/lora_loader.js

@@ -5,7 +5,6 @@ import {
   updateConnectedTriggerWords,
   chainCallback,
   mergeLoras,
-  setupInputWidgetWithAutocomplete,
   getAllGraphNodes,
   getNodeFromGraph,
 } from "./utils.js";
@@ -129,12 +128,12 @@ app.registerExtension({
           set(value) {
             const oldValue = _mode;
             _mode = value;
-            
+
             // Trigger mode change handler
             if (self.onModeChange) {
               self.onModeChange(value, oldValue);
             }
-            
+
             console.log(`[Lora Loader] Node mode changed from ${oldValue} to ${value}`);
           }
         });
@@ -142,14 +141,14 @@ app.registerExtension({
         // Define the mode change handler
         this.onModeChange = function(newMode, oldMode) {
           console.log(`Lora Loader node mode changed: from ${oldMode} to ${newMode}`);
-          
+
           // Update connected trigger word toggle nodes when mode changes
           const allActiveLoraNames = collectActiveLorasFromChain(self);
           updateConnectedTriggerWords(self, allActiveLoraNames);
         };
 
+        // Get the text input widget (AUTOCOMPLETE_TEXT_LORAS type, created by Vue widgets)
         const inputWidget = this.widgets[0];
-        inputWidget.options.getMaxHeight = () => 100;
         this.inputWidget = inputWidget;
 
         const scheduleInputSync = debounce((lorasValue) => {
@@ -202,7 +201,8 @@ app.registerExtension({
           }
         ).widget;
 
-        const originalCallback = (value) => {
+        // Set up callback for the text input widget to trigger merge logic
+        inputWidget.callback = (value) => {
           if (isUpdating) return;
           isUpdating = true;
 
@@ -218,13 +218,6 @@ app.registerExtension({
             isUpdating = false;
           }
         };
-
-        // Setup input widget with autocomplete
-        inputWidget.callback = setupInputWidgetWithAutocomplete(
-          this,
-          inputWidget,
-          originalCallback
-        );
       });
     }
   },
@@ -241,27 +234,6 @@ app.registerExtension({
       // Merge the loras data
       const mergedLoras = mergeLoras(node.widgets[0].value, existingLoras);
       node.lorasWidget.value = mergedLoras;
-
-      // Initialize autocomplete after DOM is fully rendered
-      const inputWidget = node.inputWidget || node.widgets[0];
-      if (inputWidget && !node.autocomplete) {
-        const { setupInputWidgetWithAutocomplete } = await import("./utils.js");
-        const modelType = "loras";
-        const autocompleteOptions = {
-          maxItems: 20,
-          minChars: 1,
-          debounceDelay: 200,
-        };
-        // Fix: Assign the enhanced callback to replace the original
-        inputWidget.callback = setupInputWidgetWithAutocomplete(node, inputWidget, inputWidget.callback, modelType, autocompleteOptions);
-
-        // Eager initialization: trigger callback after short delay to ensure DOM is ready
-        setTimeout(() => {
-          if (!node.autocomplete && inputWidget.callback) {
-            inputWidget.callback(inputWidget.value);
-          }
-        }, 100);
-      }
     }
   },
 });

web/comfyui/lora_stacker.js

@@ -1,14 +1,10 @@
 import { app } from "../../scripts/app.js";
 import {
   getActiveLorasFromNode,
-  collectActiveLorasFromChain,
   updateConnectedTriggerWords,
   updateDownstreamLoaders,
   chainCallback,
   mergeLoras,
-  setupInputWidgetWithAutocomplete,
-  getLinkFromGraph,
-  getNodeKey,
 } from "./utils.js";
 import { addLorasWidget } from "./loras_widget.js";
 import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
@@ -31,8 +27,8 @@ app.registerExtension({
         let isUpdating = false;
         let isSyncingInput = false;
 
+        // Get the text input widget (AUTOCOMPLETE_TEXT_LORAS type, created by Vue widgets)
         const inputWidget = this.widgets[0];
-        inputWidget.options.getMaxHeight = () => 100;
         this.inputWidget = inputWidget;
 
         const scheduleInputSync = debounce((lorasValue) => {
@@ -95,39 +91,32 @@ app.registerExtension({
 
         this.lorasWidget = result.widget;
 
-        // Wrap the callback with autocomplete setup
+        // Set up callback for the text input widget to trigger merge logic
-        const originalCallback = (value) => {
+        inputWidget.callback = (value) => {
           if (isUpdating) return;
           isUpdating = true;
 
           try {
-            const currentLoras = this.lorasWidget.value || [];
+            const currentLoras = this.lorasWidget?.value || [];
             const mergedLoras = mergeLoras(value, currentLoras);
-
+            if (this.lorasWidget) {
-            this.lorasWidget.value = mergedLoras;
+              this.lorasWidget.value = mergedLoras;
-
+            }
             // Update this stacker's direct trigger toggles with its own active loras
             // Only if the stacker node itself is active (mode 0 for Always, mode 3 for On Trigger)
             const isNodeActive = this.mode === undefined || this.mode === 0 || this.mode === 3;
             const activeLoraNames = isNodeActive ? getActiveLorasFromNode(this) : new Set();
             updateConnectedTriggerWords(this, activeLoraNames);
-
             // Find all Lora Loader nodes in the chain that might need updates
             updateDownstreamLoaders(this);
           } finally {
             isUpdating = false;
           }
         };
-
-        // Setup input widget with autocomplete
-        inputWidget.callback = setupInputWidgetWithAutocomplete(
-          this,
-          inputWidget,
-          originalCallback
-        );
       });
     }
   },
+
   async loadedGraphNode(node) {
     if (node.comfyClass == "Lora Stacker (LoraManager)") {
       // Restore saved value if exists
@@ -138,20 +127,9 @@ app.registerExtension({
         existingLoras = savedValue || [];
       }
       // Merge the loras data
-      const mergedLoras = mergeLoras(node.widgets[0].value, existingLoras);
-      node.lorasWidget.value = mergedLoras;
-
       const inputWidget = node.inputWidget || node.widgets[0];
-      if (inputWidget && !node.autocomplete) {
+      const mergedLoras = mergeLoras(inputWidget.value, existingLoras);
-        const { setupInputWidgetWithAutocomplete } = await import("./utils.js");
+      node.lorasWidget.value = mergedLoras;
-        const modelType = "loras";
-        const autocompleteOptions = {
-          maxItems: 20,
-          minChars: 1,
-          debounceDelay: 200,
-        };
-        inputWidget.callback = setupInputWidgetWithAutocomplete(node, inputWidget, inputWidget.callback, modelType, autocompleteOptions);
-      }
     }
   },
 });

web/comfyui/prompt.js

@@ -1,5 +1,5 @@
 import { app } from "../../scripts/app.js";
-import { chainCallback, setupInputWidgetWithAutocomplete } from "./utils.js";
+import { chainCallback } from "./utils.js";
 
 app.registerExtension({
   name: "LoraManager.Prompt",
@@ -9,36 +9,12 @@ app.registerExtension({
       chainCallback(nodeType.prototype, "onNodeCreated", function () {
         this.serialize_widgets = true;
 
-        const textWidget = this.widgets?.[0];
+        // Get the text input widget (AUTOCOMPLETE_TEXT_EMBEDDINGS type, created by Vue widgets)
-        if (!textWidget) {
+        const inputWidget = this.widgets?.[0];
-          return;
+        if (inputWidget) {
+          this.inputWidget = inputWidget;
         }
-
-        const originalCallback =
-          typeof textWidget.callback === "function" ? textWidget.callback : null;
-
-        textWidget.callback = setupInputWidgetWithAutocomplete(
-          this,
-          textWidget,
-          originalCallback,
-          "embeddings"
-        );
       });
     }
   },
-  async loadedGraphNode(node) {
-    if (node.comfyClass == "Prompt (LoraManager)") {
-      const textWidget = node.widgets?.[0];
-      if (textWidget && !node.autocomplete) {
-        const { setupInputWidgetWithAutocomplete } = await import("./utils.js");
-        const modelType = "embeddings";
-        const autocompleteOptions = {
-          maxItems: 20,
-          minChars: 1,
-          debounceDelay: 200,
-        };
-        textWidget.callback = setupInputWidgetWithAutocomplete(node, textWidget, textWidget.callback, modelType, autocompleteOptions);
-      }
-    }
-  },
 });

web/comfyui/wanvideo_lora_select.js

@@ -4,7 +4,6 @@ import {
   updateConnectedTriggerWords,
   chainCallback,
   mergeLoras,
-  setupInputWidgetWithAutocomplete,
 } from "./utils.js";
 import { addLorasWidget } from "./loras_widget.js";
 import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
@@ -31,8 +30,8 @@ app.registerExtension({
         let isUpdating = false;
         let isSyncingInput = false;
 
+        // Get the text input widget (AUTOCOMPLETE_TEXT_LORAS type, at index 2 after low_mem_load and merge_loras)
         const inputWidget = this.widgets[2];
-        inputWidget.options.getMaxHeight = () => 100;
         this.inputWidget = inputWidget;
 
         const scheduleInputSync = debounce((lorasValue) => {
@@ -81,17 +80,17 @@ app.registerExtension({
 
         this.lorasWidget = result.widget;
 
-        // Wrap the callback with autocomplete setup
+        // Set up callback for the text input widget to trigger merge logic
-        const originalCallback = (value) => {
+        inputWidget.callback = (value) => {
           if (isUpdating) return;
           isUpdating = true;
 
           try {
-            const currentLoras = this.lorasWidget.value || [];
+            const currentLoras = this.lorasWidget?.value || [];
             const mergedLoras = mergeLoras(value, currentLoras);
-
+            if (this.lorasWidget) {
-            this.lorasWidget.value = mergedLoras;
+              this.lorasWidget.value = mergedLoras;
-
+            }
             // Update this node's direct trigger toggles with its own active loras
             const activeLoraNames = getActiveLorasFromNode(this);
             updateConnectedTriggerWords(this, activeLoraNames);
@@ -99,14 +98,10 @@ app.registerExtension({
             isUpdating = false;
           }
         };
-        inputWidget.callback = setupInputWidgetWithAutocomplete(
-          this,
-          inputWidget,
-          originalCallback
-        );
       });
     }
   },
+
   async loadedGraphNode(node) {
     if (node.comfyClass == "WanVideo Lora Select (LoraManager)") {
       // Restore saved value if exists
@@ -117,20 +112,9 @@ app.registerExtension({
         existingLoras = savedValue || [];
       }
       // Merge the loras data
-      const mergedLoras = mergeLoras(node.widgets[2].value, existingLoras);
-      node.lorasWidget.value = mergedLoras;
-
       const inputWidget = node.inputWidget || node.widgets[2];
-      if (inputWidget && !node.autocomplete) {
+      const mergedLoras = mergeLoras(inputWidget.value, existingLoras);
-        const { setupInputWidgetWithAutocomplete } = await import("./utils.js");
+      node.lorasWidget.value = mergedLoras;
-        const modelType = "loras";
-        const autocompleteOptions = {
-          maxItems: 20,
-          minChars: 1,
-          debounceDelay: 200,
-        };
-        inputWidget.callback = setupInputWidgetWithAutocomplete(node, inputWidget, inputWidget.callback, modelType, autocompleteOptions);
-      }
     }
   },
 });