From faa3bea3ab66511d550d6b63ffd73fe0d040d704 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Wed, 28 Feb 2024 22:06:54 +0100
Subject: [PATCH] Allow to navigate to dropdown entries by keyboard

---
 .../elements/part_livesearch_controller.js    | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js
index 51738a30..7b717880 100644
--- a/assets/controllers/elements/part_livesearch_controller.js
+++ b/assets/controllers/elements/part_livesearch_controller.js
@@ -50,6 +50,25 @@ export default class extends Controller {
             plugins: [recentSearchesPlugin],
             openOnFocus: true,
             placeholder: "Search for parts",
+
+            // Use a navigator compatible with turbo:
+            navigator: {
+                navigate({ itemUrl }) {
+                    window.Turbo.visit(itemUrl, { action: "advance" });
+                },
+                navigateNewTab({ itemUrl }) {
+                    const windowReference = window.open(itemUrl, '_blank', 'noopener');
+
+                    if (windowReference) {
+                        windowReference.focus();
+                    }
+                },
+                navigateNewWindow({ itemUrl }) {
+                    window.open(itemUrl, '_blank', 'noopener');
+                },
+            },
+
+            // If the form is submitted, forward the term to the form
             onSubmit({state, event, ...setters}) {
                 //Put the current text into each target input field
                 const input = that.inputTarget;
@@ -61,6 +80,8 @@ export default class extends Controller {
                 input.value = state.query;
                 input.form.requestSubmit();
             },
+
+
             getSources({ query }) {
                 return [
                     {
@@ -71,6 +92,9 @@ export default class extends Controller {
                             return fetch(url)
                                 .then((response) => response.json());
                         },
+                        getItemUrl({ item }) {
+                            return part_detail_uri_template.replace('__ID__', item.id);
+                        },
                         templates: {
                             header({ html }) {
                                 return html`<span class="aa-SourceHeaderTitle">Parts</span>