Controlling the manage filter section with JS too

app/javascript/controllers/combobox_controller.js

@@ -2,7 +2,10 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [ "label", "item", "hiddenField" ]
-  static values = { selectPropertyName: { type: String, default: "aria-checked" } }
+  static values = {
+    selectPropertyName: { type: String, default: "aria-checked" },
+    defaultValue: String
+  }
 
   connect() {
     this.labelTarget.textContent = this.#selectedLabel

app/javascript/controllers/filter_settings_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = ["filtersSet"]
+  static targets = ["field"]
+
+  connect() {
+    this.change()
+  }
+
+  change() {
+    this.#toggleFiltersSetClass()
+  }
+
+  #toggleFiltersSetClass(shouldAdd) {
+    this.element.classList.toggle(this.filtersSetClass, this.#hasFiltersSet)
+  }
+
+  get #hasFiltersSet() {
+    return this.fieldTargets.some(field => this.#isFieldSet(field))
+  }
+
+  #isFieldSet(field) {
+    const value = field.value?.trim()
+
+    if (!value) return false
+
+    const defaultValue = this.#defaultValueForField(field)
+    return defaultValue ? value !== defaultValue : true
+  }
+
+  #defaultValueForField(field) {
+    const comboboxContainer = field.closest("[data-combobox-default-value]")
+    return comboboxContainer?.dataset?.comboboxDefaultValue
+  }
+}