Commit 8765d2f9 authored by Jacob Schatz's avatar Jacob Schatz

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
parents 3e687315 4d716b76
...@@ -28,38 +28,43 @@ ...@@ -28,38 +28,43 @@
}; };
})(this)); })(this));
timeout = ""; timeout = "";
this.input.on("keyup", (function(_this) { this.input
return function(e) { .on('keydown', function (e) {
var keyCode = e.which;
if (keyCode === 13) {
e.preventDefault()
}
})
.on('keyup', function(e) {
var keyCode; var keyCode;
keyCode = e.which; keyCode = e.which;
if (ARROW_KEY_CODES.indexOf(keyCode) >= 0) { if (ARROW_KEY_CODES.indexOf(keyCode) >= 0) {
return; return;
} }
if (_this.input.val() !== "" && !$inputContainer.hasClass(HAS_VALUE_CLASS)) { if (this.input.val() !== "" && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
$inputContainer.addClass(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); $inputContainer.removeClass(HAS_VALUE_CLASS);
} }
if (keyCode === 13) { if (keyCode === 13) {
return false; return false;
} }
if (_this.options.remote) { if (this.options.remote) {
clearTimeout(timeout); clearTimeout(timeout);
return timeout = setTimeout(function() { return timeout = setTimeout(function() {
var blur_field; var blurField = this.shouldBlur(keyCode);
blur_field = _this.shouldBlur(keyCode); if (blurField && this.filterInputBlur) {
if (blur_field && _this.filterInputBlur) { this.input.blur();
_this.input.blur(); }
} return this.options.query(this.input.val(), function(data) {
return _this.options.query(_this.input.val(), function(data) { return this.options.callback(data);
return _this.options.callback(data); }.bind(this));
}); }.bind(this), 250);
}, 250);
} else { } else {
return _this.filter(_this.input.val()); return this.filter(this.input.val());
} }
}; }.bind(this));
})(this));
} }
GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) { GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) {
...@@ -382,6 +387,7 @@ ...@@ -382,6 +387,7 @@
GitLabDropdown.prototype.opened = function() { GitLabDropdown.prototype.opened = function() {
var contentHtml; var contentHtml;
currentIndex = -1;
this.addArrowKeyEvent(); this.addArrowKeyEvent();
if (this.options.setIndeterminateIds) { if (this.options.setIndeterminateIds) {
this.options.setIndeterminateIds.call(this); this.options.setIndeterminateIds.call(this);
...@@ -619,7 +625,7 @@ ...@@ -619,7 +625,7 @@
var $input, ARROW_KEY_CODES, selector; var $input, ARROW_KEY_CODES, selector;
ARROW_KEY_CODES = [38, 40]; ARROW_KEY_CODES = [38, 40];
$input = this.dropdown.find(".dropdown-input-field"); $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) { if (this.dropdown.find(".dropdown-toggle-page").length) {
selector = ".dropdown-page-one " + selector; selector = ".dropdown-page-one " + selector;
} }
...@@ -647,7 +653,7 @@ ...@@ -647,7 +653,7 @@
return false; return false;
} }
if (currentKeyCode === 13 && currentIndex !== -1) { if (currentKeyCode === 13 && currentIndex !== -1) {
return _this.selectRowAtIndex(e, currentIndex); return _this.selectRowAtIndex(e, $('.is-focused', _this.dropdown).closest('li').index() - 1);
} }
}; };
})(this)); })(this));
......
...@@ -89,8 +89,14 @@ ...@@ -89,8 +89,14 @@
toggleLabel: function(obj, $el) { toggleLabel: function(obj, $el) {
return $el.text().trim(); return $el.text().trim();
}, },
clicked: function(e) { clicked: function(selected, $el, e) {
return $dropdown.closest('form').submit(); 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());
}
} }
}); });
}); });
......
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
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment