fix(widgets): persist LoRA entry selection and active tab across save/load

web/comfyui/loras_widget.js

@@ -711,7 +711,11 @@ export function addLorasWidget(node, name, opts, callback) {
   // Create widget with new DOM Widget API
   const widget = node.addDOMWidget(name, "custom", container, {
     getValue: function() {
-      return widgetValue;
+      return widgetValue.map(lora => {
+        const entry = { ...lora };
+        entry.selected = lora.name === selectedLora;
+        return entry;
+      });
     },
     setValue: function(v) {
       // Remove duplicates by keeping the last occurrence of each lora name
@@ -738,6 +742,15 @@ export function addLorasWidget(node, name, opts, callback) {
       });
 
       widgetValue = updatedValue;
+
+      // Restore selection state when loading a saved workflow
+      if (!selectedLora) {
+        const selectedEntry = updatedValue.find(lora => lora.selected);
+        if (selectedEntry) {
+          selectedLora = selectedEntry.name;
+        }
+      }
+
       renderLoras(widgetValue, widget);
     },
     hideOnZoom: true,

web/comfyui/utils.js

@@ -438,6 +438,7 @@ export function mergeLoras(lorasText, lorasArr) {
         active: lora.active !== undefined ? lora.active : true,
         expanded: lora.expanded !== undefined ? lora.expanded : false,
         clipStrength: lora.clipStrength !== undefined ? lora.clipStrength : parsedLoras[lora.name].clipStrength,
+        selected: !!lora.selected,
       });
       usedNames.add(lora.name);
     }
@@ -451,6 +452,7 @@ export function mergeLoras(lorasText, lorasArr) {
         strength: parsedLoras[name].strength,
         active: true,
         clipStrength: parsedLoras[name].clipStrength,
+        selected: false,
       });
     }
   }

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

@@ -2224,7 +2224,7 @@ to { transform: rotate(360deg);
   resize: vertical !important;
 }
 
-.lora-info-widget[data-v-a65e9027] {
+.lora-info-widget[data-v-41af3987] {
   padding: 12px;
   background: rgba(40, 44, 52, 0.6);
   border-radius: 4px;
@@ -2240,45 +2240,45 @@ to { transform: rotate(360deg);
    determined solely by CSS — not by descendant content. This breaks the
    feedback loop where content grows → ResizeObserver resizes → content
    reflows → repeat. Same technique used by tags_widget.js + lm_styles.css. */
-.lora-info-widget.lm-vue-node[data-v-a65e9027] {
+.lora-info-widget.lm-vue-node[data-v-41af3987] {
   contain: layout size;
 }
 
 /* ── Tab bar ── */
-.lora-info-tabs[data-v-a65e9027] {
+.lora-info-tabs[data-v-41af3987] {
   display: flex;
   gap: 0;
   margin-bottom: 10px;
   border-bottom: 1px solid var(--border-color, #444);
   flex-shrink: 0;
 }
-.lora-info-tab[data-v-a65e9027] {
+.lora-info-tab[data-v-41af3987] {
   flex: 1;
   text-align: center;
   cursor: pointer;
   padding: 6px 0;
   position: relative;
 }
-.lora-info-tab-input[data-v-a65e9027] {
+.lora-info-tab-input[data-v-41af3987] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }
-.lora-info-tab-label[data-v-a65e9027] {
+.lora-info-tab-label[data-v-41af3987] {
   font-size: 12px;
   font-weight: 500;
   color: var(--fg-color, #fff);
   opacity: 0.5;
   transition: opacity 0.15s;
 }
-.lora-info-tab:hover .lora-info-tab-label[data-v-a65e9027] {
+.lora-info-tab:hover .lora-info-tab-label[data-v-41af3987] {
   opacity: 0.75;
 }
-.lora-info-tab.active .lora-info-tab-label[data-v-a65e9027] {
+.lora-info-tab.active .lora-info-tab-label[data-v-41af3987] {
   opacity: 1;
 }
-.lora-info-tab.active[data-v-a65e9027]::after {
+.lora-info-tab.active[data-v-41af3987]::after {
   content: '';
   position: absolute;
   bottom: -1px;
@@ -2290,16 +2290,16 @@ to { transform: rotate(360deg);
 }
 
 /* ── Tab content ── */
-.tab-content[data-v-a65e9027] {
+.tab-content[data-v-41af3987] {
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
-.notes-tab[data-v-a65e9027] {
+.notes-tab[data-v-41af3987] {
   display: flex;
   flex-direction: column;
 }
-.description-tab[data-v-a65e9027] {
+.description-tab[data-v-41af3987] {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -2307,12 +2307,12 @@ to { transform: rotate(360deg);
 }
 
 /* ── Info fields (shared) ── */
-.info-field[data-v-a65e9027] {
+.info-field[data-v-41af3987] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.info-label[data-v-a65e9027] {
+.info-label[data-v-41af3987] {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
@@ -2320,18 +2320,18 @@ to { transform: rotate(360deg);
   color: var(--fg-color, #fff);
   opacity: 0.6;
 }
-.lora-filename[data-v-a65e9027] {
+.lora-filename[data-v-41af3987] {
   font-size: 13px;
   font-weight: 500;
   color: var(--fg-color, #fff);
   word-break: break-all;
   margin-bottom: 8px;
 }
-.notes-field[data-v-a65e9027] {
+.notes-field[data-v-41af3987] {
   flex: 1;
   min-height: 0;
 }
-.lora-notes[data-v-a65e9027] {
+.lora-notes[data-v-41af3987] {
   width: 100%;
   flex: 1;
   min-height: 60px;
@@ -2346,14 +2346,14 @@ to { transform: rotate(360deg);
   font-family: inherit;
   outline: none;
 }
-.lora-notes[data-v-a65e9027]:focus {
+.lora-notes[data-v-41af3987]:focus {
   border-color: var(--comfy-input-border, #444);
 }
-.lora-notes[data-v-a65e9027]:disabled {
+.lora-notes[data-v-41af3987]:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
-.save-btn[data-v-a65e9027] {
+.save-btn[data-v-41af3987] {
   width: 100%;
   margin-top: 8px;
   padding: 6px 12px;
@@ -2367,11 +2367,11 @@ to { transform: rotate(360deg);
   box-sizing: border-box;
   flex-shrink: 0;
 }
-.save-btn[data-v-a65e9027]:hover:not(:disabled) {
+.save-btn[data-v-41af3987]:hover:not(:disabled) {
   background: rgba(66, 153, 225, 0.25);
   border-color: rgba(66, 153, 225, 0.6);
 }
-.save-btn[data-v-a65e9027]:disabled {
+.save-btn[data-v-41af3987]:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   background: rgba(66, 153, 225, 0.05);
@@ -2379,7 +2379,7 @@ to { transform: rotate(360deg);
 }
 
 /* ── Description states ── */
-.description-state[data-v-a65e9027] {
+.description-state[data-v-41af3987] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2391,22 +2391,22 @@ to { transform: rotate(360deg);
   min-height: 0;
   flex-shrink: 0;
 }
-.description-state.error[data-v-a65e9027] {
+.description-state.error[data-v-41af3987] {
   opacity: 0.7;
   color: #f87171;
 }
 
 /* ── Description content ── */
-.description-content[data-v-a65e9027] {
+.description-content[data-v-41af3987] {
   min-height: 0;
 }
-.description-section[data-v-a65e9027] {
+.description-section[data-v-41af3987] {
   margin-bottom: 14px;
 }
-.description-section[data-v-a65e9027]:last-child {
+.description-section[data-v-41af3987]:last-child {
   margin-bottom: 0;
 }
-.description-text[data-v-a65e9027] {
+.description-text[data-v-41af3987] {
   padding: 8px 0;
   font-size: 12px;
   line-height: 1.5;
@@ -2414,41 +2414,41 @@ to { transform: rotate(360deg);
   opacity: 0.85;
   word-break: break-word;
 }
-.description-text[data-v-a65e9027] p {
+.description-text[data-v-41af3987] p {
   margin: 0 0 8px 0;
 }
-.description-text[data-v-a65e9027] p:last-child {
+.description-text[data-v-41af3987] p:last-child {
   margin-bottom: 0;
 }
-.description-text[data-v-a65e9027] a {
+.description-text[data-v-41af3987] a {
   color: rgba(66, 153, 225, 0.9);
 }
-.description-text[data-v-a65e9027] ul,
-.description-text[data-v-a65e9027] ol {
+.description-text[data-v-41af3987] ul,
+.description-text[data-v-41af3987] ol {
   padding-left: 20px;
   margin: 4px 0;
 }
-.description-text[data-v-a65e9027] h1,
-.description-text[data-v-a65e9027] h2,
-.description-text[data-v-a65e9027] h3 {
+.description-text[data-v-41af3987] h1,
+.description-text[data-v-41af3987] h2,
+.description-text[data-v-41af3987] h3 {
   font-size: 13px;
   margin: 10px 0 4px 0;
   font-weight: 600;
   opacity: 0.95;
 }
-.description-text[data-v-a65e9027] code {
+.description-text[data-v-41af3987] code {
   background: rgba(255, 255, 255, 0.08);
   padding: 1px 4px;
   border-radius: 3px;
   font-size: 11px;
 }
-.description-text[data-v-a65e9027] img {
+.description-text[data-v-41af3987] img {
   max-width: 100%;
   border-radius: 4px;
 }
 
 /* ── Placeholder (shared) ── */
-.placeholder[data-v-a65e9027] {
+.placeholder[data-v-41af3987] {
   font-style: italic;
   color: rgba(226, 232, 240, 0.5);
   text-align: center;
@@ -2457,10 +2457,10 @@ to { transform: rotate(360deg);
 }
 
 /* ── Spinner (Font Awesome) ── */
-.fa-spinner[data-v-a65e9027] {
-  animation: fa-spin-a65e9027 1s linear infinite;
+.fa-spinner[data-v-41af3987] {
+  animation: fa-spin-41af3987 1s linear infinite;
 }
-@keyframes fa-spin-a65e9027 {
+@keyframes fa-spin-41af3987 {
 0% { transform: rotate(0deg);
 }
 100% { transform: rotate(360deg);
@@ -15484,33 +15484,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       comfyApp.canvas.processMouseWheel(event);
     }
     onMounted(() => {
-      props.widget.serializeValue = async () => ({
+      var _a2, _b, _c, _d;
+      const buildValue = () => ({
         name: loraName.value,
         notes: notes.value,
         filePath: filePath.value,
         activeTab: activeTab.value
       });
-      props.widget.onSetValue = (v2) => {
+      const applyValue = (v2) => {
         if (v2 && typeof v2 === "object") {
           const data = v2;
+          if (data.activeTab !== void 0) activeTab.value = data.activeTab;
           if (data.name !== void 0) loraName.value = data.name;
           if (data.notes !== void 0) {
             notes.value = data.notes;
             originalNotes.value = data.notes;
           }
           if (data.filePath !== void 0) filePath.value = data.filePath;
-          if (data.activeTab !== void 0) activeTab.value = data.activeTab;
         }
       };
-      if (props.widget.value && typeof props.widget.value === "object") {
-        const data = props.widget.value;
-        if (data.name !== void 0) loraName.value = data.name;
-        if (data.notes !== void 0) {
-          notes.value = data.notes;
-          originalNotes.value = data.notes;
+      props.widget.options.getValue = buildValue;
+      props.widget.options.setValue = applyValue;
+      props.widget.serializeValue = async () => buildValue();
+      props.widget.onSetValue = applyValue;
+      const widgetIndex = (_b = (_a2 = props.widget.node) == null ? void 0 : _a2.widgets) == null ? void 0 : _b.findIndex(
+        (w2) => w2.id === props.widget.id
+      );
+      let restored = false;
+      if (widgetIndex !== void 0 && widgetIndex >= 0) {
+        const savedValue = (_d = (_c = props.widget.node) == null ? void 0 : _c.widgets_values) == null ? void 0 : _d[widgetIndex];
+        if (savedValue && typeof savedValue === "object") {
+          applyValue(savedValue);
+          restored = true;
         }
-        if (data.filePath !== void 0) filePath.value = data.filePath;
-        if (data.activeTab !== void 0) activeTab.value = data.activeTab;
+      }
+      if (!restored && props.widget.value && typeof props.widget.value === "object") {
+        applyValue(props.widget.value);
       }
       props.widget._setLoraInfo = (data) => {
         if (data) {
@@ -15624,7 +15633,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LoraInfoWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a65e9027"]]);
+const LoraInfoWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-41af3987"]]);
 function createVueWidgetCleanup(vueApp, onCleanup) {
   let didUnmount = false;
   return () => {