Merge branch 'gl-dropdown-enter' into 'master'

Fixed enter key in search input not working

## What does this MR do?

Fixes a bug where the enter key wouldn't search in the top nav search input

Closes #20627 

See merge request !5888

app/assets/javascripts/gl_dropdown.js

@@ -31,8 +31,8 @@
       this.input
         .on('keydown', function (e) {
           var keyCode = e.which;
-          if (keyCode === 13) {
-            e.preventDefault();
+          if (keyCode === 13 && !options.elIsInput) {
+            e.preventDefault()
           }
         })
         .on('keyup', function(e) {
@@ -46,7 +46,7 @@
           } else if (this.input.val() === "" && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
             $inputContainer.removeClass(HAS_VALUE_CLASS);
           }
-          if (keyCode === 13) {
+          if (keyCode === 13 && !options.elIsInput) {
             return false;
           }
           if (this.options.remote) {
@@ -238,6 +238,7 @@
       }
       if (this.options.filterable) {
         this.filter = new GitLabDropdownFilter(this.filterInput, {
+          elIsInput: $(this.el).is('input'),
           filterInputBlur: this.filterInputBlur,
           filterByText: this.options.filterByText,
           onFilter: this.options.onFilter,
@@ -266,8 +267,12 @@
                 if (_this.dropdown.find('.dropdown-toggle-page').length) {
                   selector = ".dropdown-page-one " + selector;
                 }
-                $(selector, _this.dropdown).first().find('a').addClass('is-focused');
-                return currentIndex = 0;
+                if ($(_this.el).is('input')) {
+                  currentIndex = -1;
+                } else {
+                  $(selector, _this.dropdown).first().find('a').addClass('is-focused');
+                  currentIndex = 0;
+                }
               }
             };
           })(this)
@@ -613,15 +618,23 @@
     GitLabDropdown.prototype.selectRowAtIndex = function(index) {
       var $el, selector;
-      selector = SELECTABLE_CLASSES + ":eq(" + index + ") a";
+      // If we pass an option index
+      if (typeof index !== "undefined") {
+        selector = SELECTABLE_CLASSES + ":eq(" + index + ") a";
+      } else {
+        selector = ".dropdown-content .is-focused";
+      }
       if (this.dropdown.find(".dropdown-toggle-page").length) {
         selector = ".dropdown-page-one " + selector;
       }
       $el = $(selector, this.dropdown);
       if ($el.length) {
-        $el.first().trigger('click');
         var href = $el.attr('href');
-        if (href && href !== '#') Turbolinks.visit(href);
+        if (href && href !== '#') {
+          Turbolinks.visit(href);
+        } else {
+          $el.first().trigger('click');
+        }
       }
     };
@@ -657,7 +670,7 @@
             return false;
           }
           if (currentKeyCode === 13 && currentIndex !== -1) {
-            return _this.selectRowAtIndex(currentIndex);
+            _this.selectRowAtIndex();
           }
         };
       })(this));

spec/features/search_spec.rb

@@ -71,6 +71,16 @@ describe "Search", feature: true  do
   end
   describe 'Right header search field', feature: true do
+    it 'allows enter key to search', js: true do
+      visit namespace_project_path(project.namespace, project)
+      fill_in 'search', with: 'gitlab'
+      find('#search').native.send_keys(:enter)
+
+      page.within '.title' do
+        expect(page).to have_content 'Search'
+      end
+    end
+
     describe 'Search in project page' do
       before do
         visit namespace_project_path(project.namespace, project)