Fixed input styles in search preview mode, added animation

Also added JS handlers for hiding the suggestions

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;
@@ -14,6 +15,8 @@ class GlobalSearch {
     }
 
     setupListeners() {
+        this.hideOnOuterEventListener = this.hideOnOuterEventListener.bind(this);
+
         this.input.addEventListener('input', () => {
             const value = this.input.value;
             if (value.length > 0) {
@@ -33,15 +36,35 @@ 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');
+        document.addEventListener('click', this.hideOnOuterEventListener);
+        document.addEventListener('focusin', this.hideOnOuterEventListener);
+        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 = '';
+        document.removeEventListener('click', this.hideOnOuterEventListener);
+        document.removeEventListener('focusin', this.hideOnOuterEventListener);
     }
+
+    hideOnOuterEventListener(event) {
+        if (!this.container.contains(event.target)) {
+            this.hideSuggestions();
+        }
+    };
 }
 
 export default GlobalSearch;

resources/sass/_animations.scss

@@ -16,23 +16,21 @@
   }
 }
 
-.anim.searchResult {
+.search-suggestions-animation{
-  opacity: 0;
+  animation-name: searchSuggestions;
-  transform: translate3d(580px, 0, 0);
+  animation-duration: 180ms;
-  animation-name: searchResult;
-  animation-duration: 220ms;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 }
 
-@keyframes searchResult {
+@keyframes searchSuggestions {
   0% {
-    opacity: 0;
+    opacity: .5;
-    transform: translate3d(400px, 0, 0);
+    transform: scale(0.9);
   }
   100% {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    transform: scale(1);
   }
 }
 

resources/sass/_components.scss

@@ -1011,30 +1011,3 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
   color: #333;
 }
-
-.global-search-suggestions {
-  display: none;
-  position: absolute;
-  top: -$-s;
-  left: 0;
-  right: 0;
-  z-index: -1;
-  margin-left: -$-xxl;
-  margin-right: -$-xxl;
-  padding-top: 56px;
-  border-radius: 3px;
-  box-shadow: $bs-hover;
-  .entity-item-snippet p  {
-    display: none;
-  }
-  .entity-item-snippet {
-    font-size: .8rem;
-  }
-  .entity-list-item-name {
-    font-size: .9rem;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-  }
-}

resources/sass/_header.scss

@@ -135,6 +135,47 @@ header .search-box {
   }
 }
 
+.global-search-suggestions {
+  display: none;
+  position: absolute;
+  top: -$-s;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  margin-left: -$-xxl;
+  margin-right: -$-xxl;
+  padding-top: 56px;
+  border-radius: 3px;
+  box-shadow: $bs-hover;
+  transform-origin: top center;
+  opacity: .5;
+  transform: scale(0.9);
+  .entity-item-snippet p  {
+    display: none;
+  }
+  .entity-item-snippet {
+    font-size: .8rem;
+  }
+  .entity-list-item-name {
+    font-size: .9rem;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+.search-active .global-search-suggestions {
+  display: block;
+}
+header .search-box.search-active input {
+  background-color: #EEE;
+  color: #444;
+  border-color: #DDD;
+}
+header .search-box.search-active #header-search-box-button {
+  color: #444;
+}
+
 .logo {
   display: inline-flex;
   padding: ($-s - 6px) $-s;

resources/views/common/header.blade.php

@@ -26,6 +26,7 @@
                        type="text"
                        name="term"
                        data-shortcut="global_search"
+                       autocomplete="off"
                        aria-label="{{ trans('common.search') }}" placeholder="{{ trans('common.search') }}"
                        value="{{ $searchTerm ?? '' }}">
                 <div refs="global-search@suggestions" class="global-search-suggestions card">