fix(ui): conditional widget toggles now also collapse the DOM-backed input element + its .dom-widget wrapper, so re-toggling actually shows/hides the field (centralised via _widget_visibility.js)

Author: Code2Collapse

js/_widget_visibility.js

@@ -0,0 +1,65 @@
+// Shared widget show/hide helper for MEC nodes.
+//
+// Modern ComfyUI renders many widgets via DOM (number inputs, textareas,
+// combo selects). Setting ``widget.type = "hidden"`` and collapsing
+// ``computeSize`` only fixes the LiteGraph layout — the DOM element and
+// its ``.dom-widget`` wrapper stay visible on top of the node, producing
+// the "I toggled false then true and the field never came back / never
+// went away" symptom. This helper toggles BOTH layers and remembers the
+// original styles so re-showing restores them exactly.
+//
+// Usage:
+//     import { setWidgetVisible } from "./_widget_visibility.js";
+//     setWidgetVisible(w, true);   // show
+//     setWidgetVisible(w, false);  // hide
+
+export function setWidgetVisible(widget, visible) {
+    if (!widget) return;
+    if (visible) {
+        if (widget.__mec_origType !== undefined) {
+            widget.type = widget.__mec_origType;
+            delete widget.__mec_origType;
+        }
+        if (widget.__mec_origComputeSize !== undefined) {
+            widget.computeSize = widget.__mec_origComputeSize;
+            delete widget.__mec_origComputeSize;
+        }
+        widget.hidden = false;
+        const el = widget.element;
+        if (el) {
+            el.style.display = widget.__mec_origElDisplay ?? "";
+            delete widget.__mec_origElDisplay;
+            const wrap = el.parentElement;
+            if (wrap && wrap.classList?.contains("dom-widget")) {
+                wrap.style.display = widget.__mec_origWrapDisplay ?? "";
+                delete widget.__mec_origWrapDisplay;
+            }
+        }
+        delete widget.__mec_hidden;
+    } else {
+        if (widget.__mec_origType === undefined) widget.__mec_origType = widget.type;
+        if (widget.__mec_origComputeSize === undefined) widget.__mec_origComputeSize = widget.computeSize;
+        widget.type = "hidden";
+        widget.computeSize = () => [0, -4];
+        widget.hidden = true;
+        const el = widget.element;
+        if (el) {
+            if (widget.__mec_origElDisplay === undefined) {
+                widget.__mec_origElDisplay = el.style.display || "";
+            }
+            el.style.display = "none";
+            const wrap = el.parentElement;
+            if (wrap && wrap.classList?.contains("dom-widget")) {
+                if (widget.__mec_origWrapDisplay === undefined) {
+                    widget.__mec_origWrapDisplay = wrap.style.display || "";
+                }
+                wrap.style.display = "none";
+            }
+        }
+        widget.__mec_hidden = true;
+    }
+}
+
+export function setHidden(widget, hidden) {
+    setWidgetVisible(widget, !hidden);
+}

js/draw_shape.js

@@ -1,6 +1,7 @@
 // DrawShapeMEC: conditional widget visibility based on `shape` dropdown.
 // Pattern modeled on KJNodes — hide irrelevant widgets by overriding computeSize to [0,-4].
 import { app } from "../../scripts/app.js";
+import { setWidgetVisible } from "./_widget_visibility.js";
 
 const SHAPE_FIELDS = {
     circle:            ["cx","cy","radius"],
@@ -29,35 +30,12 @@ function applyShapeVisibility(node) {
         if (ALWAYS_VISIBLE.has(w.name)) continue;
         // polygon's points_json is in ALWAYS_VISIBLE so we hide it for non-polygon below
         const shouldShow = allowed.has(w.name);
-        if (shouldShow) {
-            if (w.__origComputeSize) {
-                w.computeSize = w.__origComputeSize;
-                delete w.__origComputeSize;
-            }
-            w.hidden = false;
-            w.type = w.__origType || w.type;
-        } else {
-            if (!w.__origComputeSize) {
-                w.__origComputeSize = w.computeSize;
-                w.__origType = w.type;
-            }
-            w.computeSize = () => [0, -4];
-            w.hidden = true;
-            w.type = "hidden";
-        }
+        setWidgetVisible(w, shouldShow);
     }
     // Special: points_json only for polygon
     const pj = node.widgets.find(w => w.name === "points_json");
     if (pj) {
-        const isPoly = shape === "polygon";
-        if (isPoly) {
-            if (pj.__origComputeSize) { pj.computeSize = pj.__origComputeSize; delete pj.__origComputeSize; }
-            pj.hidden = false;
-        } else {
-            if (!pj.__origComputeSize) pj.__origComputeSize = pj.computeSize;
-            pj.computeSize = () => [0, -4];
-            pj.hidden = true;
-        }
+        setWidgetVisible(pj, shape === "polygon");
     }
     const sz = node.computeSize();
     node.size[0] = Math.max(node.size[0], sz[0]);

js/motion_mask_tracker.js

@@ -7,32 +7,14 @@
 //   - "histogram_diff"  : only hist_* visible
 // combine_method only applies when detection_mode == "combined".
 import { app } from "../../scripts/app.js";
+import { setHidden } from "./_widget_visibility.js";
 
 const PIXEL_DIFF = ["pixel_diff_enabled", "pixel_diff_threshold"];
 const FLOW       = ["flow_enabled", "flow_threshold", "flow_algorithm"];
 const BG_SUB     = ["bg_sub_enabled", "bg_model_frames", "bg_sub_threshold"];
 const HIST       = ["hist_enabled", "hist_grid_size", "hist_threshold"];
 const COMBINE    = ["combine_method"];
 
-function setHidden(w, hidden) {
-    if (hidden) {
-        if (!w.__origComputeSize) {
-            w.__origComputeSize = w.computeSize;
-            w.__origType = w.type;
-        }
-        w.computeSize = () => [0, -4];
-        w.hidden = true;
-        w.type = "hidden";
-    } else {
-        if (w.__origComputeSize) {
-            w.computeSize = w.__origComputeSize;
-            delete w.__origComputeSize;
-        }
-        w.hidden = false;
-        w.type = w.__origType || w.type;
-    }
-}
-
 function applyVisibility(node) {
     const get = (n) => node.widgets?.find(w => w.name === n);
     const mode = String(get("detection_mode")?.value ?? "combined");

js/vae_merge.js

@@ -1,30 +1,12 @@
 // VAEMergeMEC: per-block sliders only visible when use_blocks=True AND auto_alpha=False.
 import { app } from "../../scripts/app.js";
+import { setHidden } from "./_widget_visibility.js";
 
 const BLOCKS = [
     "block_conv_in", "block_conv_out", "block_norm_out",
     "block_0", "block_1", "block_2", "block_3", "block_mid",
 ];
 
-function setHidden(w, hidden) {
-    if (hidden) {
-        if (!w.__origComputeSize) {
-            w.__origComputeSize = w.computeSize;
-            w.__origType = w.type;
-        }
-        w.computeSize = () => [0, -4];
-        w.hidden = true;
-        w.type = "hidden";
-    } else {
-        if (w.__origComputeSize) {
-            w.computeSize = w.__origComputeSize;
-            delete w.__origComputeSize;
-        }
-        w.hidden = false;
-        w.type = w.__origType || w.type;
-    }
-}
-
 function applyVisibility(node) {
     const get = (n) => node.widgets?.find(w => w.name === n);
     const useBlocks = !!get("use_blocks")?.value;