From 9826737083671a9b9845e8499304c494430cec00 Mon Sep 17 00:00:00 2001
From: Garrett Michael Flynn <garrettmflynn@gmail.com>
Date: Wed, 17 Jan 2024 11:54:47 -0800
Subject: [PATCH] Fix Search Dropdown Selection (#564)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 src/renderer/src/stories/Search.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/stories/Search.js b/src/renderer/src/stories/Search.js
index 1d45a491d..e6efff90b 100644
--- a/src/renderer/src/stories/Search.js
+++ b/src/renderer/src/stories/Search.js
@@ -315,9 +315,10 @@ export class Search extends LitElement {
                     const listItemElement = document.createElement("li");
                     listItemElement.classList.add("option");
                     listItemElement.setAttribute("hidden", "");
+                    listItemElement.setAttribute("tabindex", -1);
                     if (option.keywords) listItemElement.setAttribute("data-keywords", JSON.stringify(option.keywords));
-                    listItemElement.addEventListener("click", (ev) => {
-                        ev.stopPropagation();
+                    listItemElement.addEventListener("click", (clickEvent) => {
+                        clickEvent.stopPropagation();
                         this.#onSelect(option);
                     });
 
@@ -393,18 +394,21 @@ export class Search extends LitElement {
     <div class="header" style=${styleMap({
         ...this.headerStyles,
     })}>
-      <input placeholder="Type here to search" value=${valueToDisplay} @click=${(ev) => {
-          ev.stopPropagation();
+      <input placeholder="Type here to search" value=${valueToDisplay} @click=${(clickEvent) => {
+          clickEvent.stopPropagation();
           if (this.listMode === "click") {
-              const input = ev.target.value;
+              const input = clickEvent.target.value;
               this.#populate(input);
           }
-      }} @input=${(ev) => {
-          const input = ev.target.value;
+      }}
+
+      @input=${(inputEvent) => {
+          const input = inputEvent.target.value;
           this.#populate(input);
       }}
 
-      @blur=${(ev) => {
+      @blur=${(blurEvent) => {
+          if (blurEvent.relatedTarget.classList.contains("option")) return;
           this.submit();
       }}