Record picker keyboard navigation

assets/js/app.js

@@ -25,6 +25,7 @@ import topbar from "../vendor/topbar";
 import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
 import FormatNumberHook from "./hooks/format-number";
 import UniversalSearchNavigationHook from "./hooks/universal-search-navigation";
+import RecordPickerNavigationHook from "./hooks/record-picker-navigation";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 import banner from "./banner";
@@ -32,6 +33,7 @@ import banner from "./banner";
 let Hooks = FluxonHooks;
 Hooks.FormatNumber = FormatNumberHook;
 Hooks.UniversalSearchNavigation = UniversalSearchNavigationHook;
+Hooks.RecordPickerNavigation = RecordPickerNavigationHook;
 Hooks.LiveToast = createLiveToastHook();
 
 const csrfToken = document

assets/js/hooks/record-picker-navigation.js

@@ -0,0 +1,113 @@
+export default {
+  mounted() {
+    this.selectedIndex = -1; // -1 means search input is focused
+
+    this.keydownHandler = (event) => {
+      const modal = document.getElementById("record-picker-modal");
+      if (!modal) return;
+
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          this.navigateDown();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          this.navigateUp();
+          break;
+        case "Enter":
+          if (this.selectedIndex >= 0) {
+            event.preventDefault();
+            this.selectCurrentResult();
+          }
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", this.keydownHandler);
+  },
+
+  updated() {
+    // Reset selection when results change
+    this.selectedIndex = -1;
+    this.updateSelection();
+  },
+
+  destroyed() {
+    if (this.keydownHandler) {
+      document.removeEventListener("keydown", this.keydownHandler);
+    }
+  },
+
+  navigateDown() {
+    const results = this.getResultElements();
+
+    if (results.length === 0) return;
+
+    if (this.selectedIndex < results.length - 1) {
+      this.selectedIndex++;
+    } else {
+      this.selectedIndex = -1;
+    }
+
+    this.updateSelection();
+  },
+
+  navigateUp() {
+    const results = this.getResultElements();
+
+    if (results.length === 0) return;
+
+    if (this.selectedIndex > -1) {
+      this.selectedIndex--;
+    } else {
+      this.selectedIndex = results.length - 1;
+    }
+
+    this.updateSelection();
+  },
+
+  selectCurrentResult() {
+    const results = this.getResultElements();
+
+    if (this.selectedIndex >= 0 && this.selectedIndex < results.length) {
+      results[this.selectedIndex].click();
+
+      if (this.selectedIndex === 0) {
+        this.navigateDown();
+      } else {
+        this.naigateUp();
+      }
+    }
+  },
+
+  updateSelection() {
+    const results = this.getResultElements();
+
+    results.forEach((result) => {
+      result.removeAttribute("aria-selected");
+    });
+
+    if (this.selectedIndex === -1) {
+      const searchInput = document.getElementById("record-picker-search-input");
+      if (searchInput) {
+        searchInput.focus();
+      }
+    } else if (this.selectedIndex >= 0 && this.selectedIndex < results.length) {
+      const selectedResult = results[this.selectedIndex];
+      selectedResult.setAttribute("aria-selected", "true");
+
+      selectedResult.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  },
+
+  getResultElements() {
+    const container = this.el;
+    if (!container) return [];
+
+    return Array.from(container.querySelectorAll('[role="option"]'));
+  }
+};