1 files changed, 33 insertions, 14 deletions

diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue
index 72fec17ac9d..f4b939fb20f 100644
--- a/app/assets/javascripts/header_search/components/app.vue
+++ b/app/assets/javascripts/header_search/components/app.vue
@@ -23,6 +23,9 @@ import {
   SEARCH_SHORTCUTS_MIN_CHARACTERS,
   SCOPE_TOKEN_MAX_LENGTH,
   INPUT_FIELD_PADDING,
+  IS_SEARCHING,
+  IS_FOCUSED,
+  IS_NOT_FOCUSED,
 } from '../constants';
 import HeaderSearchAutocompleteItems from './header_search_autocomplete_items.vue';
 import HeaderSearchDefaultItems from './header_search_default_items.vue';
@@ -65,6 +68,7 @@ export default {
   data() {
     return {
       showDropdown: false,
+      isFocused: false,
       currentFocusIndex: SEARCH_BOX_INDEX,
     };
   },
@@ -92,20 +96,18 @@ export default {
       if (!this.showDropdown || !this.isLoggedIn) {
         return false;
       }
-
       return this.searchOptions?.length > 0;
     },
     showDefaultItems() {
       return !this.searchText;
     },
-    showScopes() {
+    searchTermOverMin() {
       return this.searchText?.length > SEARCH_SHORTCUTS_MIN_CHARACTERS;
     },
     defaultIndex() {
       if (this.showDefaultItems) {
         return SEARCH_BOX_INDEX;
       }
-
       return FIRST_DROPDOWN_INDEX;
     },
 
@@ -132,12 +134,15 @@ export default {
             count: this.searchOptions.length,
           });
     },
-    searchBarStateIndicator() {
-      const hasIcon =
-        this.searchContext?.project || this.searchContext?.group ? 'has-icon' : 'has-no-icon';
-      const isSearching = this.showScopes ? 'is-searching' : 'is-not-searching';
-      const isActive = this.showSearchDropdown ? 'is-active' : 'is-not-active';
-      return `${isActive} ${isSearching} ${hasIcon}`;
+    searchBarClasses() {
+      return {
+        [IS_SEARCHING]: this.searchTermOverMin,
+        [IS_FOCUSED]: this.isFocused,
+        [IS_NOT_FOCUSED]: !this.isFocused,
+      };
+    },
+    showScopeHelp() {
+      return this.searchTermOverMin && this.isFocused;
     },
     searchBarItem() {
       return this.searchOptions?.[0];
@@ -158,11 +163,22 @@ export default {
     ...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']),
     openDropdown() {
       this.showDropdown = true;
-      this.$emit('toggleDropdown', this.showDropdown);
+      this.isFocused = true;
+      this.$emit('expandSearchBar', true);
     },
     closeDropdown() {
       this.showDropdown = false;
-      this.$emit('toggleDropdown', this.showDropdown);
+    },
+    collapseAndCloseSearchBar() {
+      // we need a delay on this method
+      // for the search bar not to remove
+      // the clear button from dom
+      // and register clicks on dropdown items
+      setTimeout(() => {
+        this.showDropdown = false;
+        this.isFocused = false;
+        this.$emit('collapseSearchBar');
+      }, 200);
     },
     submitSearch() {
       if (this.search?.length <= SEARCH_SHORTCUTS_MIN_CHARACTERS && this.currentFocusIndex < 0) {
@@ -171,6 +187,7 @@ export default {
       return visitUrl(this.currentFocusedOption?.url || this.searchQuery);
     },
     getAutocompleteOptions: debounce(function debouncedSearch(searchTerm) {
+      this.openDropdown();
       if (!searchTerm) {
         this.clearAutocomplete();
       } else {
@@ -201,7 +218,7 @@ export default {
     role="search"
     :aria-label="$options.i18n.searchGitlab"
     class="header-search gl-relative gl-rounded-base gl-w-full"
-    :class="searchBarStateIndicator"
+    :class="searchBarClasses"
     data-testid="header-search-form"
   >
     <gl-search-box-by-type
@@ -217,12 +234,13 @@ export default {
       :aria-describedby="$options.SEARCH_INPUT_DESCRIPTION"
       @focus="openDropdown"
       @click="openDropdown"
+      @blur="collapseAndCloseSearchBar"
       @input="getAutocompleteOptions"
       @keydown.enter.stop.prevent="submitSearch"
       @keydown.esc.stop.prevent="closeDropdown"
     />
     <gl-token
-      v-if="showScopes"
+      v-if="showScopeHelp"
       v-gl-resize-observer-directive="observeTokenWidth"
       class="in-search-scope-help"
       :view-only="true"
@@ -242,6 +260,7 @@ export default {
       }}
     </gl-token>
     <kbd
+      v-show="!isFocused"
       v-gl-tooltip.bottom.hover.html
       class="gl-absolute gl-right-3 gl-top-0 gl-z-index-1 keyboard-shortcut-helper"
       :title="$options.i18n.kbdHelp"
@@ -278,7 +297,7 @@ export default {
         />
         <template v-else>
           <header-search-scoped-items
-            v-if="showScopes"
+            v-if="searchTermOverMin"
             :current-focused-option="currentFocusedOption"
           />
           <header-search-autocomplete-items :current-focused-option="currentFocusedOption" />