From 5dd8b964224bb69da6119dbf49b1e1abdf16f65b Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Mon, 25 May 2026 22:03:56 +0800
Subject: [PATCH] fix(autocomplete): reactively refresh lora syntax format
 cache on settings change (#917)

The autocomplete module cached the lora_syntax_format value at module load
but never updated it when the setting changed, causing autocomplete to
always insert legacy A1111 format even when 'full path' was configured.

- Expose refreshLoraSyntaxFormat() to re-fetch the setting from the API
- Listen for cross-tab 'storage' events to react to settings saved in
  the standalone web UI
- Listen for 'visibilitychange' to refresh when the user switches back
  to the ComfyUI tab
- Wire SettingsManager.saveSetting() to set a localStorage key when
  lora_syntax_format changes, triggering the storage event
---
 static/js/managers/SettingsManager.js |  7 +++++
 web/comfyui/autocomplete.js           | 44 ++++++++++++++++++++++++---
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/static/js/managers/SettingsManager.js b/static/js/managers/SettingsManager.js
index e3c93b86..3284129d 100644
--- a/static/js/managers/SettingsManager.js
+++ b/static/js/managers/SettingsManager.js
@@ -295,6 +295,13 @@ export class SettingsManager {
         // Update state
         state.global.settings[settingKey] = value;
 
+        if (settingKey === 'lora_syntax_format') {
+            try {
+                localStorage.setItem('lm:lora-syntax-format-changed', Date.now().toString());
+            } catch (_) {
+            }
+        }
+
         if (!this.isBackendSetting(settingKey)) {
             return;
         }
diff --git a/web/comfyui/autocomplete.js b/web/comfyui/autocomplete.js
index 047d03c4..27246a12 100644
--- a/web/comfyui/autocomplete.js
+++ b/web/comfyui/autocomplete.js
@@ -105,14 +105,16 @@ function removeLoraExtension(fileName = '') {
 }
 
 let _loraSyntaxFormatCache = null;
+let _loraSyntaxFormatRefreshPromise = null;
 
 function _getLoraSyntaxFormat() {
-    if (typeof _loraSyntaxFormatCache !== 'undefined' && _loraSyntaxFormatCache !== null) {
+    if (_loraSyntaxFormatCache !== null) {
         return _loraSyntaxFormatCache;
     }
     return 'legacy';
 }
-async function _initLoraSyntaxFormat() {
+
+async function _fetchLoraSyntaxFormat() {
     try {
         const response = await api.fetchApi('/lm/settings');
         if (response.ok) {
@@ -124,10 +126,44 @@ async function _initLoraSyntaxFormat() {
         }
     } catch (e) {
     }
-    _loraSyntaxFormatCache = 'legacy';
+    if (_loraSyntaxFormatCache === null) {
+        _loraSyntaxFormatCache = 'legacy';
+    }
+}
+
+function _triggerBackgroundRefresh() {
+    if (_loraSyntaxFormatRefreshPromise) {
+        return;
+    }
+    _loraSyntaxFormatRefreshPromise = _fetchLoraSyntaxFormat().finally(() => {
+        _loraSyntaxFormatRefreshPromise = null;
+    });
+}
+
+async function refreshLoraSyntaxFormat() {
+    await _fetchLoraSyntaxFormat();
+}
+
+function _initLoraSyntaxFormat() {
+    _triggerBackgroundRefresh();
 }
 _initLoraSyntaxFormat();
 
+function _initLoraSyntaxFormatReactive() {
+    window.addEventListener('storage', (e) => {
+        if (e.key === 'lm:lora-syntax-format-changed') {
+            _triggerBackgroundRefresh();
+        }
+    });
+
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'visible') {
+            _triggerBackgroundRefresh();
+        }
+    });
+}
+_initLoraSyntaxFormatReactive();
+
 function parseSearchTokens(term = '') {
     const include = [];
     const exclude = [];
@@ -2791,4 +2827,4 @@ class AutoComplete {
     }
 }
 
-export { AutoComplete };
+export { AutoComplete, refreshLoraSyntaxFormat };