Fix search dropdown not closing on blur if emptyfix-search-dropdown-blur-close

4 files changed, 21 insertions, 2 deletions

diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index ab43c2139bf..a0780f36b7b 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -405,7 +405,7 @@ export class SearchAutocomplete {
     this.wrap.removeClass('search-active');
     // If input is blank then restore state
     if (this.searchInput.val() === '') {
-      return this.restoreOriginalState();
+      this.restoreOriginalState();
     }
     this.dropdownMenu.removeClass('show');
   }
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index a6023a1cbb9..496ec3c78b0 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -16,7 +16,7 @@
                                               mr_path: merge_requests_dashboard_path },
                                             aria: { label: _('Search or jump to…') }
           %button.hidden.js-dropdown-search-toggle{ type: 'button', data: { toggle: 'dropdown' } }
-          .dropdown-menu.dropdown-select
+          .dropdown-menu.dropdown-select.js-dashboard-search-options
             = dropdown_content do
               %ul
                 %li.dropdown-menu-empty-item
diff --git a/changelogs/unreleased/fix-search-dropdown-blur-close.yml b/changelogs/unreleased/fix-search-dropdown-blur-close.yml
new file mode 100644
index 00000000000..1ac9dc674fe
--- /dev/null
+++ b/changelogs/unreleased/fix-search-dropdown-blur-close.yml
@@ -0,0 +1,5 @@
+---
+title: Fix search dropdown not closing on blur if empty
+merge_request: 28730
+author:
+type: fixed
diff --git a/spec/features/global_search_spec.rb b/spec/features/global_search_spec.rb
index d7692181453..f2ab5373d3d 100644
--- a/spec/features/global_search_spec.rb
+++ b/spec/features/global_search_spec.rb
@@ -25,4 +25,18 @@ describe 'Global search' do
       expect(page).to have_selector('.gl-pagination .next')
     end
   end
+
+  it 'closes the dropdown on blur', :js do
+    visit dashboard_projects_path
+
+    fill_in 'search', with: "a"
+    dropdown = find('.js-dashboard-search-options')
+
+    expect(dropdown[:class]).to include 'show'
+
+    find('#search').send_keys(:backspace)
+    find('body').click
+
+    expect(dropdown[:class]).not_to include 'show'
+  end
 end