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 0af3ed375861884d919eb801c6f8717fa4096d7f..52c76764250ae39cce98abf4deca41fa2b6e0520 100644 (file)
--- 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 5e57047dfb5f7794876ebe9eb9556e2330f15826..522855b2e47bc4b84f04426666b85244784b8d0b 100644 (file)
--- 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 {