fix(widgets): reuse orphaned DOM containers after undo/redo in Vue render mode

In ComfyUI Vue render mode, WidgetDOM.vue reuses its component instance
during undo/redo without re-calling mountWidgetElement(), leaving newly
created widget containers detached from the DOM.

- AutocompleteTextWidget: scan for empty containers by ID prefix and reuse
- Loras widget: scan for empty .lm-loras-container elements and reuse
- Prevent duplicate event listeners by guarding listener setup on new
  containers only
- Keep container in DOM on cleanup (clearChildren instead of remove)
  so it can be found and reused by the next factory invocation

web/comfyui/loras_widget.js

@@ -14,12 +14,31 @@ import { getStrengthStepPreference } from "./settings.js";
 export function addLorasWidget(node, name, opts, callback) {
   ensureLmStyles();
 
-  // Create container for loras
-  const container = document.createElement("div");
-  container.className = "lm-loras-container";
+  // Create container for loras — search for an empty container already
+  // in the DOM first. During undo/redo in ComfyUI Vue render mode,
+  // WidgetDOM.vue reuses its component without re-calling
+  // mountWidgetElement(), so we must reuse the existing DOM element
+  // instead of creating an orphaned replacement.
+  let container = null;
+  let reuseExisting = false;
+  const existingContainers = document.querySelectorAll('.lm-loras-container');
+  for (const el of existingContainers) {
+    if (el.children.length === 0) {
+      container = el;
+      reuseExisting = true;
+      break;
+    }
+  }
 
-  forwardMiddleMouseToCanvas(container);
-  forwardWheelToCanvas(container);
+  if (!container) {
+    container = document.createElement("div");
+    container.className = "lm-loras-container";
+  }
+
+  if (!reuseExisting) {
+    forwardMiddleMouseToCanvas(container);
+    forwardWheelToCanvas(container);
+  }
 
   // Set initial height using CSS variables approach
   const defaultHeight = 200;
@@ -29,10 +48,8 @@ export function addLorasWidget(node, name, opts, callback) {
   // scrolls when content exceeds the allocated space.
   container.style.setProperty('--comfy-widget-min-height', `${defaultHeight}px`);
 
-  if (typeof LiteGraph !== 'undefined' && LiteGraph.vueNodesMode) {
+  if (!reuseExisting && typeof LiteGraph !== 'undefined' && LiteGraph.vueNodesMode) {
     container.classList.add('lm-vue-node');
-    // Window capture-phase hook: scroll the widget instead of zooming the canvas
-    // when the wheel is over a scrollable loras list.
     enableListWheelScroll(container);
   }
 
@@ -732,9 +749,10 @@ export function addLorasWidget(node, name, opts, callback) {
   widget.callback = callback;
 
   widget.onRemove = () => {
-    container.remove(); 
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
     previewTooltip.cleanup();
-    // Remove keyboard event listener
     container.removeEventListener('keydown', handleKeyboardNavigation);
   };
 

web/comfyui/vue-widgets/lora-manager-widgets.js

@@ -16081,15 +16081,27 @@ function createLoraInfoWidget(node) {
 function createAutocompleteTextWidgetFactory(node, widgetName, modelType, inputOptions = {}) {
   var _a2, _b, _c;
   const metadataWidgetName = `__lm_autocomplete_meta_${widgetName}`;
-  const instanceId = createAutocompleteTextWidgetInstanceId();
-  const container = document.createElement("div");
-  container.id = `autocomplete-text-widget-${instanceId}`;
-  container.style.width = "100%";
-  container.style.height = "100%";
-  container.style.display = "flex";
-  container.style.flexDirection = "column";
-  container.style.overflow = "hidden";
-  forwardMiddleMouseToCanvas(container);
+  let container = null;
+  const existingContainers = document.querySelectorAll(
+    '[id^="autocomplete-text-widget-"]'
+  );
+  for (const el of existingContainers) {
+    if (el.children.length === 0) {
+      container = el;
+      break;
+    }
+  }
+  if (!container) {
+    const instanceId = String(createAutocompleteTextWidgetInstanceId());
+    container = document.createElement("div");
+    container.id = `autocomplete-text-widget-${instanceId}`;
+    container.style.width = "100%";
+    container.style.height = "100%";
+    container.style.display = "flex";
+    container.style.flexDirection = "column";
+    container.style.overflow = "hidden";
+    forwardMiddleMouseToCanvas(container);
+  }
   const widgetElementRef = { inputEl: void 0 };
   container.__widgetInputEl = widgetElementRef;
   const metadataWidget = node.addWidget("text", metadataWidgetName, {
@@ -16154,7 +16166,7 @@ function createAutocompleteTextWidgetFactory(node, widgetName, modelType, inputO
     ripple: false
   });
   vueApp.mount(container);
-  const appKey = instanceId;
+  const appKey = container.id;
   vueApps.set(appKey, vueApp);
   if (maxHeight) {
     container.style.minHeight = `${AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT}px`;
@@ -16166,9 +16178,12 @@ function createAutocompleteTextWidgetFactory(node, widgetName, modelType, inputO
       typeof LiteGraph !== "undefined" && LiteGraph.vueNodesMode
     );
   }
-  widget.onRemove = createVueWidgetCleanup(vueApp, () => {
+  const vueCleanup = createVueWidgetCleanup(vueApp, () => {
     vueApps.delete(appKey);
   });
+  widget.onRemove = () => {
+    vueCleanup();
+  };
   const minWidth = AUTOCOMPLETE_TEXT_MIN_WIDTH_DEFAULT;
   const minHeight = modelType === "loras" ? void 0 : AUTOCOMPLETE_TEXT_MIN_HEIGHT_DEFAULT;
   return { widget, minWidth, minHeight };
@@ -16315,8 +16330,7 @@ app$1.registerExtension({
         if (bypassResult) {
           info.widgets_values = [...info.widgets_values ?? [], null];
         }
-        const result = originalConfigure == null ? void 0 : originalConfigure.apply(this, arguments);
-        return result;
+        return originalConfigure == null ? void 0 : originalConfigure.apply(this, arguments);
       };
     }
     if (LORA_CHAIN_NODE_TYPES$1.includes(comfyClass)) {