Browse Source

Autofocus search field in multiple select

In a single select, the search field is automatically focused when
the select is opened. This also applied to multiple selects, but
this was causing issues because the container was automatically
focused when the dropdown was closed.

This makes a change such that the search field is automatically
focused when the dropdown is closed.

This closes https://github.com/select2/select2/issues/2995.
Kevin Brown 10 years ago
parent
commit
0c0e2527fa

+ 5 - 0
dist/js/select2.amd.full.js

@@ -1256,6 +1256,7 @@ define('select2/selection/search',[
       self.$search.attr('tabindex', -1);
 
       self.$search.val('');
+      self.$search.focus();
     });
 
     container.on('enable', function () {
@@ -1269,6 +1270,10 @@ define('select2/selection/search',[
     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();

+ 5 - 0
dist/js/select2.amd.js

@@ -1256,6 +1256,7 @@ define('select2/selection/search',[
       self.$search.attr('tabindex', -1);
 
       self.$search.val('');
+      self.$search.focus();
     });
 
     container.on('enable', function () {
@@ -1269,6 +1270,10 @@ define('select2/selection/search',[
     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();

+ 5 - 0
dist/js/select2.full.js

@@ -1694,6 +1694,7 @@ define('select2/selection/search',[
       self.$search.attr('tabindex', -1);
 
       self.$search.val('');
+      self.$search.focus();
     });
 
     container.on('enable', function () {
@@ -1707,6 +1708,10 @@ define('select2/selection/search',[
     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();

File diff suppressed because it is too large
+ 0 - 0
dist/js/select2.full.min.js


+ 5 - 0
dist/js/select2.js

@@ -1694,6 +1694,7 @@ define('select2/selection/search',[
       self.$search.attr('tabindex', -1);
 
       self.$search.val('');
+      self.$search.focus();
     });
 
     container.on('enable', function () {
@@ -1707,6 +1708,10 @@ define('select2/selection/search',[
     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();

File diff suppressed because it is too large
+ 0 - 0
dist/js/select2.min.js


+ 5 - 0
src/js/select2/selection/search.js

@@ -39,6 +39,7 @@ define([
       self.$search.attr('tabindex', -1);
 
       self.$search.val('');
+      self.$search.focus();
     });
 
     container.on('enable', function () {
@@ -52,6 +53,10 @@ define([
     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();

Some files were not shown because too many files changed in this diff