Improved focus detection and key handling

Now the focus of the selection container is correctly monitored so
there is a consistent 1px black border on the default theme whenever
it is focused.  This requires `focusin`/`focusout` support, which is
supported by all major browsers except for Firefox.  In Firefox, the
old focus appearance is still consistent and has not been broken
by this update.

The key handling has also been improved such that some of the logic
detection that was previously done within the search handlers for
multiple select searches is now pushed back to the base selection.

This closes https://github.com/select2/select2/issues/2995.

dist/css/select2.css

@@ -200,6 +200,9 @@
 .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
   margin-left: 2px;
   margin-right: auto; }
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: solid black 1px;
+  outline: 0; }
 .select2-container--default.select2-container--disabled .select2-selection--multiple {
   background-color: #eee;
   cursor: default; }

dist/js/select2.amd.full.js

@@ -792,8 +792,13 @@ define('select2/selection/base',[
       '</span>'
     );
 
-    this._tabindex = this.$element.data('old-tabindex') ||
-      this.$element.attr('tabindex') || 0;
+    this._tabindex = 0;
+
+    if (this.$element.data('old-tabindex') != null) {
+      this._tabindex = this.$element.data('old-tabindex');
+    } else if (this.$element.attr('tabindex') != null) {
+      this._tabindex = this.$element.attr('tabindex');
+    }
 
     $selection.attr('title', this.$element.attr('title'));
     $selection.attr('tabindex', this._tabindex);
@@ -813,6 +818,14 @@ define('select2/selection/base',[
 
     this.$selection.attr('aria-owns', resultsId);
 
+    this.$selection.on('focus', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('blur', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', function (evt) {
       self.trigger('keypress', evt);
 
@@ -1267,13 +1280,17 @@ define('select2/selection/search',[
       self.$search.prop('disabled', true);
     });
 
+    this.$selection.on('focusin', '.select2-search--inline', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('focusout', '.select2-search--inline', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
-      if (!container.isOpen()) {
-        self.trigger('open');
-      }
-
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
@@ -4394,6 +4411,14 @@ define('select2/core',[
       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');
+    });
+
     this.on('query', function (params) {
       this.data.query(params, function (data) {
         self.trigger('results:all', {

dist/js/select2.amd.js

@@ -792,8 +792,13 @@ define('select2/selection/base',[
       '</span>'
     );
 
-    this._tabindex = this.$element.data('old-tabindex') ||
-      this.$element.attr('tabindex') || 0;
+    this._tabindex = 0;
+
+    if (this.$element.data('old-tabindex') != null) {
+      this._tabindex = this.$element.data('old-tabindex');
+    } else if (this.$element.attr('tabindex') != null) {
+      this._tabindex = this.$element.attr('tabindex');
+    }
 
     $selection.attr('title', this.$element.attr('title'));
     $selection.attr('tabindex', this._tabindex);
@@ -813,6 +818,14 @@ define('select2/selection/base',[
 
     this.$selection.attr('aria-owns', resultsId);
 
+    this.$selection.on('focus', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('blur', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', function (evt) {
       self.trigger('keypress', evt);
 
@@ -1267,13 +1280,17 @@ define('select2/selection/search',[
       self.$search.prop('disabled', true);
     });
 
+    this.$selection.on('focusin', '.select2-search--inline', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('focusout', '.select2-search--inline', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
-      if (!container.isOpen()) {
-        self.trigger('open');
-      }
-
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
@@ -4394,6 +4411,14 @@ define('select2/core',[
       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');
+    });
+
     this.on('query', function (params) {
       this.data.query(params, function (data) {
         self.trigger('results:all', {

dist/js/select2.full.js

@@ -1231,8 +1231,13 @@ define('select2/selection/base',[
       '</span>'
     );
 
-    this._tabindex = this.$element.data('old-tabindex') ||
-      this.$element.attr('tabindex') || 0;
+    this._tabindex = 0;
+
+    if (this.$element.data('old-tabindex') != null) {
+      this._tabindex = this.$element.data('old-tabindex');
+    } else if (this.$element.attr('tabindex') != null) {
+      this._tabindex = this.$element.attr('tabindex');
+    }
 
     $selection.attr('title', this.$element.attr('title'));
     $selection.attr('tabindex', this._tabindex);
@@ -1252,6 +1257,14 @@ define('select2/selection/base',[
 
     this.$selection.attr('aria-owns', resultsId);
 
+    this.$selection.on('focus', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('blur', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', function (evt) {
       self.trigger('keypress', evt);
 
@@ -1706,13 +1719,17 @@ define('select2/selection/search',[
       self.$search.prop('disabled', true);
     });
 
+    this.$selection.on('focusin', '.select2-search--inline', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('focusout', '.select2-search--inline', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
-      if (!container.isOpen()) {
-        self.trigger('open');
-      }
-
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
@@ -4833,6 +4850,14 @@ define('select2/core',[
       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');
+    });
+
     this.on('query', function (params) {
       this.data.query(params, function (data) {
         self.trigger('results:all', {

dist/js/select2.js

@@ -1231,8 +1231,13 @@ define('select2/selection/base',[
       '</span>'
     );
 
-    this._tabindex = this.$element.data('old-tabindex') ||
-      this.$element.attr('tabindex') || 0;
+    this._tabindex = 0;
+
+    if (this.$element.data('old-tabindex') != null) {
+      this._tabindex = this.$element.data('old-tabindex');
+    } else if (this.$element.attr('tabindex') != null) {
+      this._tabindex = this.$element.attr('tabindex');
+    }
 
     $selection.attr('title', this.$element.attr('title'));
     $selection.attr('tabindex', this._tabindex);
@@ -1252,6 +1257,14 @@ define('select2/selection/base',[
 
     this.$selection.attr('aria-owns', resultsId);
 
+    this.$selection.on('focus', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('blur', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', function (evt) {
       self.trigger('keypress', evt);
 
@@ -1706,13 +1719,17 @@ define('select2/selection/search',[
       self.$search.prop('disabled', true);
     });
 
+    this.$selection.on('focusin', '.select2-search--inline', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('focusout', '.select2-search--inline', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
-      if (!container.isOpen()) {
-        self.trigger('open');
-      }
-
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
@@ -4833,6 +4850,14 @@ define('select2/core',[
       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');
+    });
+
     this.on('query', function (params) {
       this.data.query(params, function (data) {
         self.trigger('results:all', {

src/js/select2/core.js

@@ -263,6 +263,14 @@ 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');
+    });
+
     this.on('query', function (params) {
       this.data.query(params, function (data) {
         self.trigger('results:all', {

src/js/select2/selection/base.js

@@ -19,8 +19,13 @@ define([
       '</span>'
     );
 
-    this._tabindex = this.$element.data('old-tabindex') ||
-      this.$element.attr('tabindex') || 0;
+    this._tabindex = 0;
+
+    if (this.$element.data('old-tabindex') != null) {
+      this._tabindex = this.$element.data('old-tabindex');
+    } else if (this.$element.attr('tabindex') != null) {
+      this._tabindex = this.$element.attr('tabindex');
+    }
 
     $selection.attr('title', this.$element.attr('title'));
     $selection.attr('tabindex', this._tabindex);
@@ -40,6 +45,14 @@ define([
 
     this.$selection.attr('aria-owns', resultsId);
 
+    this.$selection.on('focus', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('blur', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', function (evt) {
       self.trigger('keypress', evt);
 

src/js/select2/selection/search.js

@@ -50,13 +50,17 @@ define([
       self.$search.prop('disabled', true);
     });
 
+    this.$selection.on('focusin', '.select2-search--inline', function (evt) {
+      self.trigger('focus', evt);
+    });
+
+    this.$selection.on('focusout', '.select2-search--inline', function (evt) {
+      self.trigger('blur', evt);
+    });
+
     this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
-      if (!container.isOpen()) {
-        self.trigger('open');
-      }
-
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();

src/scss/theme/default/_multiple.scss

@@ -75,14 +75,19 @@
   }
 }
 
+&.select2-container--focus {
+  .select2-selection--multiple {
+    border: solid black 1px;
+    outline: 0;
+  }
+}
+
 &.select2-container--disabled {
   .select2-selection--multiple {
     background-color: #eee;
     cursor: default;
   }
 
-
-
   .select2-selection__choice__remove {
     display: none;
   }