Replaced JS logic with CSS focus-within logic

[bookstack] / resources / js / components / global-search.js

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() {
     }
 
     setupListeners() {

-        this.hideOnOuterEventListener = this.hideOnOuterEventListener.bind(this);
-

         this.input.addEventListener('input', () => {
             const value = this.input.value;
             if (value.length > 0) {
         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');
 
     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');
         })
         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 = '';
         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
 }
 
 export default GlobalSearch;
\ No newline at end of file