Merge branch '33897-make-arrow-buttons-work-within-search-box' into 'master'

Make arrow buttons work within search box

See merge request gitlab-org/gitlab!18685

app/assets/javascripts/gl_dropdown.js

@@ -617,7 +617,7 @@ GitLabDropdown = (function() {
   GitLabDropdown.prototype.hidden = function(e) {
     var $input;
     this.resetRows();
-    this.removeArrayKeyEvent();
+    this.removeArrowKeyEvent();
     $input = this.dropdown.find('.dropdown-input-field');
     if (this.options.filterable) {
       $input.blur();
@@ -900,7 +900,7 @@ GitLabDropdown = (function() {
     );
   };
 
-  GitLabDropdown.prototype.removeArrayKeyEvent = function() {
+  GitLabDropdown.prototype.removeArrowKeyEvent = function() {
     return $('body').off('keydown');
   };
 

app/assets/javascripts/search_autocomplete.js

-/* eslint-disable no-return-assign, one-var, no-var, consistent-return, class-methods-use-this, no-lonely-if, vars-on-top */
+/* eslint-disable no-return-assign, one-var, no-var, consistent-return, class-methods-use-this, vars-on-top */
 
 import $ from 'jquery';
 import { escape, throttle } from 'underscore';
@@ -95,7 +95,6 @@ export class SearchAutocomplete {
       this.createAutocomplete();
     }
 
-    this.saveTextLength();
     this.bindEvents();
     this.dropdownToggle.dropdown();
     this.searchInput.addClass('js-autocomplete-disabled');
@@ -107,7 +106,7 @@ export class SearchAutocomplete {
     this.onClearInputClick = this.onClearInputClick.bind(this);
     this.onSearchInputFocus = this.onSearchInputFocus.bind(this);
     this.onSearchInputKeyUp = this.onSearchInputKeyUp.bind(this);
-    this.onSearchInputKeyDown = this.onSearchInputKeyDown.bind(this);
+    this.onSearchInputChange = this.onSearchInputChange.bind(this);
     this.setScrollFade = this.setScrollFade.bind(this);
   }
   getElement(selector) {
@@ -118,10 +117,6 @@ export class SearchAutocomplete {
     return (this.originalState = this.serializeState());
   }
 
-  saveTextLength() {
-    return (this.lastTextLength = this.searchInput.val().length);
-  }
-
   createAutocomplete() {
     return this.searchInput.glDropdown({
       filterInputBlur: false,
@@ -318,12 +313,16 @@ export class SearchAutocomplete {
   }
 
   bindEvents() {
-    this.searchInput.on('keydown', this.onSearchInputKeyDown);
+    this.searchInput.on('input', this.onSearchInputChange);
     this.searchInput.on('keyup', this.onSearchInputKeyUp);
     this.searchInput.on('focus', this.onSearchInputFocus);
     this.searchInput.on('blur', this.onSearchInputBlur);
     this.clearInput.on('click', this.onClearInputClick);
     this.dropdownContent.on('scroll', throttle(this.setScrollFade, 250));
+
+    this.searchInput.on('click', e => {
+      e.stopPropagation();
+    });
   }
 
   enableAutocomplete() {
@@ -342,43 +341,19 @@ export class SearchAutocomplete {
     }
   }
 
-  // Saves last length of the entered text
-  onSearchInputKeyDown() {
-    return this.saveTextLength();
+  onSearchInputChange() {
+    this.enableAutocomplete();
   }
 
   onSearchInputKeyUp(e) {
     switch (e.keyCode) {
-      case KEYCODE.BACKSPACE:
-        // When removing the last character and no badge is present
-        if (this.lastTextLength === 1) {
-          this.disableAutocomplete();
-        }
-        // When removing any character from existin value
-        if (this.lastTextLength > 1) {
-          this.enableAutocomplete();
-        }
-        break;
       case KEYCODE.ESCAPE:
         this.restoreOriginalState();
         break;
       case KEYCODE.ENTER:
         this.disableAutocomplete();
         break;
-      case KEYCODE.UP:
-      case KEYCODE.DOWN:
-        return;
       default:
-        // Handle the case when deleting the input value other than backspace
-        // e.g. Pressing ctrl + backspace or ctrl + x
-        if (this.searchInput.val() === '') {
-          this.disableAutocomplete();
-        } else {
-          // We should display the menu only when input is not empty
-          if (e.keyCode !== KEYCODE.ENTER) {
-            this.enableAutocomplete();
-          }
-        }
     }
     this.wrap.toggleClass('has-value', Boolean(e.target.value));
   }
@@ -434,7 +409,7 @@ export class SearchAutocomplete {
   disableAutocomplete() {
     if (!this.searchInput.hasClass('js-autocomplete-disabled') && this.dropdown.hasClass('show')) {
       this.searchInput.addClass('js-autocomplete-disabled');
-      this.dropdown.removeClass('show').trigger('hidden.bs.dropdown');
+      this.dropdown.dropdown('toggle');
       this.restoreMenu();
     }
   }

changelogs/unreleased/33897-make-arrow-buttons-work-within-search-box.yml

+---
+title: Fix keyboard shortcuts in header search autocomplete
+merge_request: 18685
+author:
+type: fixed

spec/features/search/user_uses_header_search_field_spec.rb

@@ -26,6 +26,16 @@ describe 'User uses header search field', :js do
       end
     end
 
+    context 'when using the keyboard shortcut' do
+      before do
+        find('body').native.send_keys('s')
+      end
+
+      it 'shows the category search dropdown' do
+        expect(page).to have_selector('.dropdown-header', text: /#{scope_name}/i)
+      end
+    end
+
     context 'when clicking the search field' do
       before do
         page.find('#search.js-autocomplete-disabled').click
@@ -77,15 +87,21 @@ describe 'User uses header search field', :js do
     end
 
     context 'when entering text into the search field' do
-      before do
+      it 'does not display the category search dropdown' do
         page.within('.search-input-wrap') do
           fill_in('search', with: scope_name.first(4))
         end
-      end
 
-      it 'does not display the category search dropdown' do
         expect(page).not_to have_selector('.dropdown-header', text: /#{scope_name}/i)
       end
+
+      it 'hides the dropdown when there are no results' do
+        page.within('.search-input-wrap') do
+          fill_in('search', with: 'a_search_term_with_no_results')
+        end
+
+        expect(page).not_to have_selector('.dropdown-menu')
+      end
     end
   end