Merge branch 'ref-switcher-enter-submit' into 'master'

Fixed enter submitting form in dropdown

## What does this MR do?

When searching for a branch in the ref switcher & then pressing enter it would submit the form without anything. This instead doesn't submit the form without anything being selected in the dropdown.

Also improved the UX by making it submit with `Turoblinks` as currently no loading bar is shown so the user has no idea if anything is happening.

## What are the relevant issue numbers?

Closes #19549 

See merge request !5111

3 files changed, 61 insertions, 20 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index c5d92831fbe..cc7e422fd89 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -28,38 +28,43 @@
         };
       })(this));
       timeout = "";
-      this.input.on("keyup", (function(_this) {
-        return function(e) {
+      this.input
+        .on('keydown', function (e) {
+          var keyCode = e.which;
+
+          if (keyCode === 13) {
+            e.preventDefault()
+          }
+        })
+        .on('keyup', function(e) {
           var keyCode;
           keyCode = e.which;
           if (ARROW_KEY_CODES.indexOf(keyCode) >= 0) {
             return;
           }
-          if (_this.input.val() !== "" && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
+          if (this.input.val() !== "" && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
             $inputContainer.addClass(HAS_VALUE_CLASS);
-          } else if (_this.input.val() === "" && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
+          } else if (this.input.val() === "" && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
             $inputContainer.removeClass(HAS_VALUE_CLASS);
           }
           if (keyCode === 13) {
             return false;
           }
-          if (_this.options.remote) {
+          if (this.options.remote) {
             clearTimeout(timeout);
             return timeout = setTimeout(function() {
-              var blur_field;
-              blur_field = _this.shouldBlur(keyCode);
-              if (blur_field && _this.filterInputBlur) {
-                _this.input.blur();
+              var blurField = this.shouldBlur(keyCode);
+              if (blurField && this.filterInputBlur) {
+                this.input.blur();
               }
-              return _this.options.query(_this.input.val(), function(data) {
-                return _this.options.callback(data);
-              });
-            }, 250);
+              return this.options.query(this.input.val(), function(data) {
+                return this.options.callback(data);
+              }.bind(this));
+            }.bind(this), 250);
           } else {
-            return _this.filter(_this.input.val());
+            return this.filter(this.input.val());
           }
-        };
-      })(this));
+        }.bind(this));
     }
 
     GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) {
@@ -382,6 +387,7 @@
 
     GitLabDropdown.prototype.opened = function() {
       var contentHtml;
+      currentIndex = -1;
       this.addArrowKeyEvent();
       if (this.options.setIndeterminateIds) {
         this.options.setIndeterminateIds.call(this);
@@ -619,7 +625,7 @@
       var $input, ARROW_KEY_CODES, selector;
       ARROW_KEY_CODES = [38, 40];
       $input = this.dropdown.find(".dropdown-input-field");
-      selector = '.dropdown-content li:not(.divider,.dropdown-header,.separator)';
+      selector = '.dropdown-content li:not(.divider,.dropdown-header,.separator):visible';
       if (this.dropdown.find(".dropdown-toggle-page").length) {
         selector = ".dropdown-page-one " + selector;
       }
@@ -647,7 +653,7 @@
             return false;
           }
           if (currentKeyCode === 13 && currentIndex !== -1) {
-            return _this.selectRowAtIndex(e, currentIndex);
+            return _this.selectRowAtIndex(e, $('.is-focused', _this.dropdown).closest('li').index() - 1);
           }
         };
       })(this));
diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js
index e6663177161..b97f6d22715 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -89,8 +89,14 @@
           toggleLabel: function(obj, $el) {
             return $el.text().trim();
           },
-          clicked: function(e) {
-            return $dropdown.closest('form').submit();
+          clicked: function(selected, $el, e) {
+            e.preventDefault()
+            if ($('input[name="ref"]').length) {
+              var $form = $dropdown.closest('form'),
+                  action = $form.attr('action'),
+                  divider = action.indexOf('?') < 0 ? '?' : '&';
+              Turbolinks.visit(action + '' + divider + '' + $form.serialize());
+            }
           }
         });
       });
diff --git a/spec/features/projects/ref_switcher_spec.rb b/spec/features/projects/ref_switcher_spec.rb
new file mode 100644
index 00000000000..b3ba40b35af
--- /dev/null
+++ b/spec/features/projects/ref_switcher_spec.rb
@@ -0,0 +1,29 @@
+require 'rails_helper'
+
+feature 'Ref switcher', feature: true, js: true do
+  include WaitForAjax
+  let(:user)      { create(:user) }
+  let(:project)   { create(:project, :public) }
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+    visit namespace_project_tree_path(project.namespace, project, 'master')
+  end
+
+  it 'allow user to change ref by enter key' do
+    click_button 'master'
+    wait_for_ajax
+
+    page.within '.project-refs-form' do
+      input = find('input[type="search"]')
+      input.set 'expand'
+
+      input.native.send_keys :down
+      input.native.send_keys :down
+      input.native.send_keys :enter
+
+      expect(page).to have_content 'expand-collapse-files'
+    end
+  end
+end