From 597cc48248b8b42142c1087221ad5702a74db4a5 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 22 Aug 2025 17:19:37 +0800
Subject: [PATCH] feat: Refactor selection state handling for LoRA entries to
 avoid style conflicts

---
 web/comfyui/loras_widget.js            | 10 +++++++---
 web/comfyui/loras_widget_components.js | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/comfyui/loras_widget.js b/web/comfyui/loras_widget.js
index ef7457a3..7a739b13 100644
--- a/web/comfyui/loras_widget.js
+++ b/web/comfyui/loras_widget.js
@@ -452,9 +452,6 @@ export function addLorasWidget(node, name, opts, callback) {
 
       container.appendChild(loraEl);
 
-      // Update selection state
-      updateEntrySelection(loraEl, name === selectedLora);
-
       // If expanded, show the clip entry
       if (isExpanded) {
         totalVisibleEntries++;
@@ -638,6 +635,13 @@ export function addLorasWidget(node, name, opts, callback) {
     // Calculate height based on number of loras and fixed sizes
     const calculatedHeight = CONTAINER_PADDING + HEADER_HEIGHT + (Math.min(totalVisibleEntries, 12) * LORA_ENTRY_HEIGHT);
     updateWidgetHeight(container, calculatedHeight, defaultHeight, node);
+
+    // After all LoRA elements are created, apply selection state as the last step
+    // This ensures the selection state is not overwritten
+    container.querySelectorAll('.comfy-lora-entry').forEach(entry => {
+      const entryLoraName = entry.dataset.loraName;
+      updateEntrySelection(entry, entryLoraName === selectedLora);
+    });
   };
 
   // Store the value in a variable to avoid recursion
diff --git a/web/comfyui/loras_widget_components.js b/web/comfyui/loras_widget_components.js
index b7bdecad..67ebc823 100644
--- a/web/comfyui/loras_widget_components.js
+++ b/web/comfyui/loras_widget_components.js
@@ -147,15 +147,22 @@ export function createDropIndicator() {
 
 // Function to update entry selection state
 export function updateEntrySelection(entryEl, isSelected) {
-  const baseColor = entryEl.dataset.active === 'true' ? 
+  // Remove any conflicting styles first
+  entryEl.style.removeProperty('border');
+  entryEl.style.removeProperty('box-shadow');
+
+  const baseColor = entryEl.dataset.active === 'true' ?
     "rgba(45, 55, 72, 0.7)" : "rgba(35, 40, 50, 0.5)";
-  const selectedColor = entryEl.dataset.active === 'true' ? 
+  const selectedColor = entryEl.dataset.active === 'true' ?
     "rgba(66, 153, 225, 0.3)" : "rgba(66, 153, 225, 0.2)";
+
+  // Update data attribute to track selection state
+  entryEl.dataset.selected = isSelected ? 'true' : 'false';
   
   if (isSelected) {
-    entryEl.style.backgroundColor = selectedColor;
-    entryEl.style.border = "1px solid rgba(66, 153, 225, 0.6)";
-    entryEl.style.boxShadow = "0 0 0 1px rgba(66, 153, 225, 0.3)";
+    entryEl.style.setProperty('backgroundColor', selectedColor, 'important');
+    entryEl.style.setProperty('border', "1px solid rgba(66, 153, 225, 0.6)", 'important');
+    entryEl.style.setProperty('box-shadow', "0 0 0 1px rgba(66, 153, 225, 0.3)", 'important');
   } else {
     entryEl.style.backgroundColor = baseColor;
     entryEl.style.border = "1px solid transparent";