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 b351278d694c434ef7c5f63fd111811011210b84..52c76764250ae39cce98abf4deca41fa2b6e0520 100644 (file)
--- a/resources/js/components/global-search.js
+++ b/resources/js/components/global-search.js
@@ -6,6 +6,7 @@ import {htmlToDom} from "../services/dom";
 class GlobalSearch {
 
     setup() {
+        this.container = this.$el;
         this.input = this.$refs.input;
         this.suggestions = this.$refs.suggestions;
         this.suggestionResultsWrap = this.$refs.suggestionResults;
@@ -33,13 +34,23 @@ class GlobalSearch {
             child.remove();
         }
 
-        this.suggestions.style.display = 'block';
         this.suggestionResultsWrap.innerHTML = '';
         this.suggestionResultsWrap.append(resultDom);
+        if (!this.container.classList.contains('search-active')) {
+            this.showSuggestions();
+        }
+    }
+
+    showSuggestions() {
+        this.container.classList.add('search-active');
+        window.requestAnimationFrame(() => {
+            this.suggestions.classList.add('search-suggestions-animation');
+        })
     }
 
     hideSuggestions() {
-        this.suggestions.style.display = null;
+        this.container.classList.remove('search-active');
+        this.suggestions.classList.remove('search-suggestions-animation');
         this.suggestionResultsWrap.innerHTML = '';
     }
 }