Fix focus wars in multiple selects
In the previous commit (02cca7b) support was added for multiple selects to automatically focus when they were tabbed into. While this did actually work, it caused a few bugs with the focus that prevented users from tabbing out of the container, effectively trapping keyboard users in Select2. This makes a few major changes to how things work in Select2, but should not break any backwards compatibility. - The internal `focus` event is now proxied through a `focus` method on the core object. This allows for two important things 1. The `focus` event will only be triggered if Select2 was in an unfocused state. 2. Select2 now (unofficially) supports the `select2('focus')` method again. But that does mean that it is possible to trigger the `focus` event now and not have it propagate throughout the widget. As it would previously trigger multiple times, even when Select2 had not actually lost focus, this is considered a fix to a bug instead of a breaking change. - The internal `blur` event in selections is only triggered when the focus is moved off of all elements within the selection. This allows for better tracking of where the focus is within Select2, but as a result of the asynchronous approach it does mean that the `blur` event is not necessarily synchronous and may be more difficult to trace. - On multiple selects, the standard selection container is never visually focused. Instead, the focus is always shifted over to the search box when it is requested. The tab index of the selection container is also always copied to the search box, so the search will always be in the tab order instead of the selection container. It's important to note that these changes to the tab order and how the focus is shifted do not apply to multiple selects that do not have a search box. Those changes also do not apply to single select boxes, which will still have the same focus and tabbing behaviours as they previously did.
This commit is contained in:
parent
02cca7baa7
commit
79cdcc0956
24
src/js/select2/core.js
vendored
24
src/js/select2/core.js
vendored
@ -214,12 +214,16 @@ define([
|
||||
|
||||
Select2.prototype._registerSelectionEvents = function () {
|
||||
var self = this;
|
||||
var nonRelayEvents = ['toggle'];
|
||||
var nonRelayEvents = ['toggle', 'focus'];
|
||||
|
||||
this.selection.on('toggle', function () {
|
||||
self.toggleDropdown();
|
||||
});
|
||||
|
||||
this.selection.on('focus', function (params) {
|
||||
self.focus(params);
|
||||
});
|
||||
|
||||
this.selection.on('*', function (name, params) {
|
||||
if ($.inArray(name, nonRelayEvents) !== -1) {
|
||||
return;
|
||||
@ -264,10 +268,6 @@ define([
|
||||
self.$container.addClass('select2-container--disabled');
|
||||
});
|
||||
|
||||
this.on('focus', function () {
|
||||
self.$container.addClass('select2-container--focus');
|
||||
});
|
||||
|
||||
this.on('blur', function () {
|
||||
self.$container.removeClass('select2-container--focus');
|
||||
});
|
||||
@ -411,6 +411,20 @@ define([
|
||||
return this.$container.hasClass('select2-container--open');
|
||||
};
|
||||
|
||||
Select2.prototype.hasFocus = function () {
|
||||
return this.$container.hasClass('select2-container--focus');
|
||||
};
|
||||
|
||||
Select2.prototype.focus = function (data) {
|
||||
// No need to re-trigger focus events if we are already focused
|
||||
if (this.hasFocus()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$container.addClass('select2-container--focus');
|
||||
this.trigger('focus');
|
||||
};
|
||||
|
||||
Select2.prototype.enable = function (args) {
|
||||
if (this.options.get('debug') && window.console && console.warn) {
|
||||
console.warn(
|
||||
|
20
src/js/select2/selection/base.js
vendored
20
src/js/select2/selection/base.js
vendored
@ -48,7 +48,7 @@ define([
|
||||
});
|
||||
|
||||
this.$selection.on('blur', function (evt) {
|
||||
self.trigger('blur', evt);
|
||||
self._handleBlur(evt);
|
||||
});
|
||||
|
||||
this.$selection.on('keydown', function (evt) {
|
||||
@ -95,6 +95,24 @@ define([
|
||||
});
|
||||
};
|
||||
|
||||
BaseSelection.prototype._handleBlur = function (evt) {
|
||||
var self = this;
|
||||
|
||||
// This needs to be delayed as the actve element is the body when the tab
|
||||
// key is pressed, possibly along with others.
|
||||
window.setTimeout(function () {
|
||||
// Don't trigger `blur` if the focus is still in the selection
|
||||
if (
|
||||
(document.activeElement == self.$selection[0]) ||
|
||||
($.contains(self.$selection[0], document.activeElement))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.trigger('blur', evt);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
BaseSelection.prototype._attachCloseHandler = function (container) {
|
||||
var self = this;
|
||||
|
||||
|
46
src/js/select2/selection/search.js
vendored
46
src/js/select2/selection/search.js
vendored
@ -21,6 +21,8 @@ define([
|
||||
|
||||
var $rendered = decorated.call(this);
|
||||
|
||||
this._transferTabIndex();
|
||||
|
||||
return $rendered;
|
||||
};
|
||||
|
||||
@ -30,36 +32,34 @@ define([
|
||||
decorated.call(this, container, $container);
|
||||
|
||||
container.on('open', function () {
|
||||
self.$search.attr('tabindex', 0);
|
||||
|
||||
self.$search.focus();
|
||||
self.$search.trigger('focus');
|
||||
});
|
||||
|
||||
container.on('close', function () {
|
||||
self.$search.attr('tabindex', -1);
|
||||
|
||||
self.$search.val('');
|
||||
self.$search.focus();
|
||||
self.$search.trigger('focus');
|
||||
});
|
||||
|
||||
container.on('enable', function () {
|
||||
self.$search.prop('disabled', false);
|
||||
|
||||
self._transferTabIndex();
|
||||
});
|
||||
|
||||
container.on('disable', function () {
|
||||
self.$search.prop('disabled', true);
|
||||
});
|
||||
|
||||
container.on('focus', function (evt) {
|
||||
self.$search.trigger('focus');
|
||||
});
|
||||
|
||||
this.$selection.on('focusin', '.select2-search--inline', function (evt) {
|
||||
self.trigger('focus', evt);
|
||||
});
|
||||
|
||||
this.$selection.on('focus', function (evt) {
|
||||
self.$search.trigger('focus');
|
||||
});
|
||||
|
||||
this.$selection.on('focusout', '.select2-search--inline', function (evt) {
|
||||
self.trigger('blur', evt);
|
||||
self._handleBlur(evt);
|
||||
});
|
||||
|
||||
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
|
||||
@ -95,10 +95,34 @@ define([
|
||||
|
||||
this.$selection.on('keyup.search input', '.select2-search--inline',
|
||||
function (evt) {
|
||||
var key = evt.which;
|
||||
|
||||
// We can freely ignore events from modifier keys
|
||||
if (key == KEYS.SHIFT || key == KEYS.CTRL || key == KEYS.ALT) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Tabbing will be handled during the `keydown` phase
|
||||
if (key == KEYS.TAB) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.handleSearch(evt);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* This method will transfer the tabindex attribute from the rendered
|
||||
* selection to the search box. This allows for the search box to be used as
|
||||
* the primary focus instead of the selection container.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
Search.prototype._transferTabIndex = function (decorated) {
|
||||
this.$search.attr('tabindex', this.$selection.attr('tabindex'));
|
||||
this.$selection.attr('tabindex', '-1');
|
||||
};
|
||||
|
||||
Search.prototype.createPlaceholder = function (decorated, placeholder) {
|
||||
this.$search.attr('placeholder', placeholder.text);
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user