From: Dan Brown <redacted>
Date: Sun, 20 Nov 2022 21:53:53 +0000 (+0000)
Subject: Replaced JS logic with CSS focus-within logic
X-Git-Tag: v22.11~1^2~10^2~4
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/2c1f20969ad3042b035425b488a754b60e6483a4

Replaced JS logic with CSS focus-within logic
---

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 {