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

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));

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());
+            }
           }
         });
       });

spec/features/projects/ref_switcher_spec.rb

+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