Revamp filters menu (WIP)

- Make them navigable by keyboard (UP, DOWN, ENTER to activate option).
- Filter based on the actual text in the element, use containment condition instead of CSS selector on value prefix.
- Make all the elements in the filter searchable and reachable by keyboard.

app/javascript/controllers/filter_controller.js

@@ -2,45 +2,21 @@ import { Controller } from "@hotwired/stimulus"
 import { debounce } from "helpers/timing_helpers"
 
 export default class extends Controller {
-  static targets = [ "list" ]
-  static classes = [ "active", "selected" ]
+  static targets = [ "input", "item" ]
 
   initialize() {
     this.filter = debounce(this.filter.bind(this), 300)
   }
 
-  connect() {
-    this.element.focus()
-  }
-
-  filter(event) {
-    this.#reset()
-
-    if (event.target.value != "") {
-      this.#selectMatches(event.target.value)
-      this.#activate()
-    }
-  }
-
-  #reset() {
-    this.#deactivate()
-
-    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach((element) => {
-      element.classList.remove(this.selectedClass)
+  filter() {
+    this.itemTargets.forEach(item => {
+      if (item.innerText.toLowerCase().includes(this.inputTarget.value.toLowerCase())) {
+        item.removeAttribute("hidden")
+      } else {
+        item.toggleAttribute("hidden", true)
+      }
     })
-  }
 
-  #activate() {
-    this.listTarget.classList.add(this.activeClass)
-  }
-
-  #deactivate() {
-    this.listTarget.classList.remove(this.activeClass)
-  }
-
-  #selectMatches(value) {
-    this.listTarget.querySelectorAll(`[data-value*=${value.toLowerCase()}]`).forEach((element) => {
-      element.classList.add(this.selectedClass)
-    })
+    this.dispatch("changed")
   }
 }

app/javascript/controllers/navigable_list_controller.js

@@ -3,57 +3,81 @@ import { nextFrame } from "helpers/timing_helpers"
 
 export default class extends Controller {
   static targets = [ "item" ]
-  static values = { selectionAttribute: { type: String, default: "aria-selected" } }
+  static values = {
+    reverseOrder: { type: Boolean, default: false },
+    selectionAttribute: { type: String, default: "aria-selected" },
+    focusOnSelection: { type: Boolean, default: true },
+    actionableItems: { type: Boolean, default: false }
+  }
 
   connect() {
-    this.selectLast()
+    this.reset()
   }
 
   // Actions
 
-  navigate(event) {
-    if (this.itemTargets.includes(event.target)) {
-      this.#keyHandlers[event.key]?.call(this, event)
+  reset(event) {
+    console.debug("SE LLEGA REVERSE", this.reverseOrderValue);
+    if (this.reverseOrderValue) {
+      this.selectLast()
+    } else {
+      this.selectFirst()
     }
   }
 
+  navigate(event) {
+    this.#keyHandlers[event.key]?.call(this, event)
+  }
+
   select({ target }) {
     this.#setCurrentFrom(target)
   }
 
-  selectCurrentOrLast(event) {
+  selectCurrentOrReset(event) {
     if (this.currentItem) {
       this.#setCurrentFrom(this.currentItem)
     } else {
-      this.selectLast()
+      this.reset()
     }
   }
 
+  selectFirst() {
+    this.#setCurrentFrom(this.#visibleItems[0])
+  }
+
   selectLast() {
-    this.#setCurrentFrom(this.itemTargets[this.itemTargets.length - 1])
+    this.#setCurrentFrom(this.#visibleItems[this.#visibleItems.length - 1])
+  }
+
+  // Private
+
+  get #visibleItems() {
+    return this.itemTargets.filter(item => !item.hidden)
   }
 
   #selectPrevious() {
-    if (this.currentItem.previousElementSibling) {
-      this.#setCurrentFrom(this.currentItem.previousElementSibling)
+    const index = this.#visibleItems.indexOf(this.currentItem)
+    if (index > 0) {
+      this.#setCurrentFrom(this.#visibleItems[index - 1])
     }
   }
 
   #selectNext() {
-    if (this.currentItem.nextElementSibling) {
-      this.#setCurrentFrom(this.currentItem.nextElementSibling)
+    const index = this.#visibleItems.indexOf(this.currentItem)
+    if (index >= 0 && index < this.#visibleItems.length - 1) {
+      this.#setCurrentFrom(this.#visibleItems[index + 1])
     }
   }
 
   async #setCurrentFrom(element) {
-    const selectedItem = this.itemTargets.find(item => item.contains(element))
+    const selectedItem = this.#visibleItems.find(item => item.contains(element))
 
     if (selectedItem) {
       this.#clearSelection()
       selectedItem.setAttribute(this.selectionAttributeValue, "true")
       this.currentItem = selectedItem
       await nextFrame()
-      this.currentItem.focus()
+      if (this.focusOnSelectionValue) { this.currentItem.focus() }
     }
   }
 
@@ -69,6 +93,13 @@ export default class extends Controller {
     event.preventDefault()
   }
 
+  #triggerActionOnCurrentItem() {
+    if (this.actionableItemsValue && this.currentItem) {
+      const clickableElement = this.currentItem.querySelector("a,button") || this.currentItem
+      clickableElement.click()
+    }
+  }
+
   #keyHandlers = {
     ArrowDown(event) {
       this.#handleArrowKey(event, this.#selectNext.bind(this))
@@ -81,6 +112,9 @@ export default class extends Controller {
     },
     ArrowLeft(event) {
       this.#handleArrowKey(event, this.#selectPrevious.bind(this))
+    },
+    Enter(event) {
+      this.#triggerActionOnCurrentItem()
     }
   }
 }