From cc67adf82f712f9225e140188e3a4727c305e0c6 Mon Sep 17 00:00:00 2001
From: DominikDoom <rehdominik@gmail.com>
Date: Tue, 9 May 2023 14:42:32 +0200
Subject: [PATCH] Fix quicksettings dropdown changes not being detected Fixes
 #176

---
 javascript/_utils.js          | 22 ++++++++++++++++++++++
 javascript/tagAutocomplete.js |  9 ++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/javascript/_utils.js b/javascript/_utils.js
index 1aaba99..d11d1c4 100644
--- a/javascript/_utils.js
+++ b/javascript/_utils.js
@@ -111,6 +111,28 @@ function updateModelName() {
     }
 }
 
+// From https://stackoverflow.com/a/61975440, how to detect JS value changes
+function observeElement(element, property, callback, delay = 0) {
+    let elementPrototype = Object.getPrototypeOf(element);
+    if (elementPrototype.hasOwnProperty(property)) {
+        let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, property);
+        Object.defineProperty(element, property, {
+            get: function() {
+                return descriptor.get.apply(this, arguments);
+            },
+            set: function () {
+                let oldValue = this[property];
+                descriptor.set.apply(this, arguments);
+                let newValue = this[property];
+                if (typeof callback == "function") {
+                    setTimeout(callback.bind(this, oldValue, newValue), delay);
+                }
+                return newValue;
+            }
+        });
+    }
+}
+
 // Queue calling function to process global queues
 async function processQueue(queue, context, ...args) {
     for (let i = 0; i < queue.length; i++) {
diff --git a/javascript/tagAutocomplete.js b/javascript/tagAutocomplete.js
index a93bb83..c3bae3b 100644
--- a/javascript/tagAutocomplete.js
+++ b/javascript/tagAutocomplete.js
@@ -855,7 +855,7 @@ async function setup() {
     });
     // Add change listener to our quicksettings to change our internal config without the apply button for them
     let quicksettings = gradioApp().querySelector('#quicksettings');
-    let commonQueryPart = "[id^=setting_tac] > label >";
+    let commonQueryPart = "[id^=setting_tac] > label";
     quicksettings?.querySelectorAll(`${commonQueryPart} input, ${commonQueryPart} textarea, ${commonQueryPart} select`).forEach(e => {
         e.addEventListener("change", () => {
             setTimeout(async () => { 
@@ -863,6 +863,13 @@ async function setup() {
             }, 500);
         });
     });
+    quicksettings?.querySelectorAll(`[id^=setting_tac].gradio-dropdown input`).forEach(e => {
+        observeElement(e, "value", () => {
+            setTimeout(async () => { 
+                await syncOptions();
+            }, 500);
+        })
+    });
 
     // Add mutation observer for the model hash text to also allow hash-based blacklist again
     let modelHashText = gradioApp().querySelector("#sd_checkpoint_hash");