WIP with a combobox controller to handle filters with pure JS

app/javascript/controllers/combobox_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "label", "item" ]
+  static values = { selectPropertyName: { type: String, default: "aria-checked" } }
+
+  connect() {
+    this.labelTarget.textContent = this.#selectedLabel
+  }
+
+  change(event) {
+    const item = event.target.closest("[role='checkbox']")
+    if (item) {
+      this.#selectedItem = item
+    }
+  }
+
+  get #selectedLabel() {
+    const label = this.#selectedItem.querySelector("[data-combobox-label]")
+    return label.dataset.comboboxLabel
+  }
+
+  get #selectedItem() {
+    return this.itemTargets.find(item => item.getAttribute(this.selectPropertyNameValue) === "true")
+  }
+
+  set #selectedItem(item) {
+    this.#clearSelection()
+    item.setAttribute(this.selectPropertyNameValue, "true")
+    this.labelTarget.textContent = this.#selectedLabel
+  }
+
+  #clearSelection() {
+    this.itemTargets.forEach(target => {
+      target.setAttribute(this.selectPropertyNameValue, "false")
+    })
+  }
+}