Fix quicksettings dropdown changes not being detected

Fixes #176

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++) {

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");