From 79cdcc0956e242c1ce642bbaa93e538c54f4be01 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Sun, 21 Jun 2015 20:07:35 -0400 Subject: [PATCH] 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. --- src/js/select2/core.js | 24 ++++++++++++---- src/js/select2/selection/base.js | 20 ++++++++++++- src/js/select2/selection/search.js | 46 +++++++++++++++++++++++------- 3 files changed, 73 insertions(+), 17 deletions(-) diff --git a/src/js/select2/core.js b/src/js/select2/core.js index ee687d6d..628087ae 100644 --- a/src/js/select2/core.js +++ b/src/js/select2/core.js @@ -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( diff --git a/src/js/select2/selection/base.js b/src/js/select2/selection/base.js index 70cac9c5..a63658af 100644 --- a/src/js/select2/selection/base.js +++ b/src/js/select2/selection/base.js @@ -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; diff --git a/src/js/select2/selection/search.js b/src/js/select2/selection/search.js index 7dbcf939..be306552 100644 --- a/src/js/select2/selection/search.js +++ b/src/js/select2/selection/search.js @@ -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); };