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
This commit is contained in:
Will Miao
2026-07-16 18:18:33 +08:00
parent 5d50ddb5d4
commit a9dc4d7b9d
4 changed files with 87 additions and 45 deletions

View File

@@ -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);
};