From 87af4e586a92726203fb391f4c88fbb8f6944743 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Tue, 17 Sep 2024 14:07:06 +0200
Subject: [PATCH] search: don't hide search drop-down on focus change

Focus/blur events are handled diffrently in Safari compared to other
browsers. For a better experience, let's not attempt to close the search
results drop-down if focus exits the search bar area. We still have a
click.outside and a keyup listener for "escape" on window to handle the
close, and a "close" button in the input bar (which is now also
focusable).

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/search-bar.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/layouts/partials/search-bar.html b/layouts/partials/search-bar.html
index b4295f38b3..095e04d4b4 100644
--- a/layouts/partials/search-bar.html
+++ b/layouts/partials/search-bar.html
@@ -3,12 +3,11 @@
   <span class="icon-svg">{{ partialCached "icon" "search" "search" }}</span>
 </a>
 <!-- search button -->
-<div x-ref="searchBarRef" x-data="{ open: false, focus: false }" @focus="open = true;" @click.outside="open = false;"
+<div x-ref="searchBarRef" x-data="{ open: false }" @click.outside="open = false;"
   @keyup.escape.window="open = false" id="search-bar"
   class="hidden sm:flex relative bg-white/10 rounded items-center p-2 sm:w-full xl:w-[400px]">
   {{ (resources.Get "images/search-ai.svg").Content | safeHTML }}
-  <input x-ref="searchBarInput" type="search" id="search-bar-input" @click="open = true" @focus="open = true;"
-    @blur.window.capture="$refs.searchBarRef.contains($event.relatedTarget) || (open = false);"
+  <input x-ref="searchBarInput" type="search" id="search-bar-input" @focus="open = true;"
     @keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;"
     @keyup.escape.prevent="open = false;" @keydown.window="(e) => {
           switch(e.key) {
@@ -16,7 +15,6 @@
             if (e.metaKey || e.ctrlKey) {
               e.preventDefault();
               $el.focus();
-              open = true;
             }
             break;
           }
@@ -30,7 +28,7 @@
     <span>K</span>
   </div>
   <div x-cloak :class="open || 'hidden'">
-    <button tabindex="-1" @click="$refs.searchBarInput.value = ''; open = false" class="text-white hover:text-white">
+    <button @click="$refs.searchBarInput.value = ''; open = false" class="text-white hover:text-white">
       <span class="icon-svg">{{ partialCached "icon" "close" "close" }}</span>
     </button>
   </div>