From 2c1f20969ad3042b035425b488a754b60e6483a4 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 20 Nov 2022 21:53:53 +0000
Subject: [PATCH] Replaced JS logic with CSS focus-within logic

---
 resources/js/components/global-search.js | 12 ------------
 resources/sass/_header.scss              |  2 +-
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/resources/js/components/global-search.js b/resources/js/components/global-search.js
index 0af3ed375..52c767642 100644
--- a/resources/js/components/global-search.js
+++ b/resources/js/components/global-search.js
@@ -15,8 +15,6 @@ class GlobalSearch {
     }
 
     setupListeners() {
-        this.hideOnOuterEventListener = this.hideOnOuterEventListener.bind(this);
-
         this.input.addEventListener('input', () => {
             const value = this.input.value;
             if (value.length > 0) {
@@ -45,8 +43,6 @@ class GlobalSearch {
 
     showSuggestions() {
         this.container.classList.add('search-active');
-        document.addEventListener('click', this.hideOnOuterEventListener);
-        document.addEventListener('focusin', this.hideOnOuterEventListener);
         window.requestAnimationFrame(() => {
             this.suggestions.classList.add('search-suggestions-animation');
         })
@@ -56,15 +52,7 @@ class GlobalSearch {
         this.container.classList.remove('search-active');
         this.suggestions.classList.remove('search-suggestions-animation');
         this.suggestionResultsWrap.innerHTML = '';
-        document.removeEventListener('click', this.hideOnOuterEventListener);
-        document.removeEventListener('focusin', this.hideOnOuterEventListener);
     }
-
-    hideOnOuterEventListener(event) {
-        if (!this.container.contains(event.target)) {
-            this.hideSuggestions();
-        }
-    };
 }
 
 export default GlobalSearch;
\ No newline at end of file
diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 5e57047df..522855b2e 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -164,7 +164,7 @@ header .search-box {
     overflow: hidden;
   }
 }
-.search-active .global-search-suggestions {
+.search-active:focus-within .global-search-suggestions {
   display: block;
 }
 header .search-box.search-active input {