Skip to content

Commit 395e06a

Browse files
kevin-brownkevin-brown
committed
Backspace unselects item in multiple selects
The backspace key now behaves very similar to how it does in other multiple select boxes, such as the one that Stack Exchange uses. When the user presses the backspace key, the last selected option is unselected and the search box is filled with the text of the option.
1 parent 0de516f commit 395e06a

7 files changed

Lines changed: 134 additions & 14 deletions

File tree

‎dist/js/select2.amd.full.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1038,8 +1038,9 @@ define('select2/selection/allowClear',[
10381038
});
10391039

10401040
define('select2/selection/search',[
1041-
'../utils'
1042-
], function (Utils) {
1041+
'../utils',
1042+
'../keys'
1043+
], function (Utils, KEYS) {
10431044
function Search (decorated, $element, options) {
10441045
decorated.call(this, $element, options);
10451046
}
@@ -1083,6 +1084,19 @@ define('select2/selection/search',[
10831084
self.trigger('keypress', evt);
10841085

10851086
self._keyUpPrevented = evt.isDefaultPrevented();
1087+
1088+
var key = evt.which;
1089+
1090+
if (key === KEYS.BACKSPACE && self.$search.val() === '') {
1091+
var $previousChoice = self.$searchContainer
1092+
.prev('.select2-selection__choice');
1093+
1094+
if ($previousChoice.length > 0) {
1095+
var item = $previousChoice.data('data');
1096+
1097+
self.searchRemoveChoice(item);
1098+
}
1099+
}
10861100
});
10871101

10881102
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -1119,6 +1133,16 @@ define('select2/selection/search',[
11191133
this._keyUpPrevented = false;
11201134
};
11211135

1136+
Search.prototype.searchRemoveChoice = function (item) {
1137+
this.trigger('unselected', {
1138+
data: item
1139+
});
1140+
1141+
this.trigger('open');
1142+
1143+
this.$search.val(item.text + ' ');
1144+
};
1145+
11221146
Search.prototype.resizeSearch = function () {
11231147
this.$search.css('width', '25px');
11241148

‎dist/js/select2.amd.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1038,8 +1038,9 @@ define('select2/selection/allowClear',[
10381038
});
10391039

10401040
define('select2/selection/search',[
1041-
'../utils'
1042-
], function (Utils) {
1041+
'../utils',
1042+
'../keys'
1043+
], function (Utils, KEYS) {
10431044
function Search (decorated, $element, options) {
10441045
decorated.call(this, $element, options);
10451046
}
@@ -1083,6 +1084,19 @@ define('select2/selection/search',[
10831084
self.trigger('keypress', evt);
10841085

10851086
self._keyUpPrevented = evt.isDefaultPrevented();
1087+
1088+
var key = evt.which;
1089+
1090+
if (key === KEYS.BACKSPACE && self.$search.val() === '') {
1091+
var $previousChoice = self.$searchContainer
1092+
.prev('.select2-selection__choice');
1093+
1094+
if ($previousChoice.length > 0) {
1095+
var item = $previousChoice.data('data');
1096+
1097+
self.searchRemoveChoice(item);
1098+
}
1099+
}
10861100
});
10871101

10881102
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -1119,6 +1133,16 @@ define('select2/selection/search',[
11191133
this._keyUpPrevented = false;
11201134
};
11211135

1136+
Search.prototype.searchRemoveChoice = function (item) {
1137+
this.trigger('unselected', {
1138+
data: item
1139+
});
1140+
1141+
this.trigger('open');
1142+
1143+
this.$search.val(item.text + ' ');
1144+
};
1145+
11221146
Search.prototype.resizeSearch = function () {
11231147
this.$search.css('width', '25px');
11241148

‎dist/js/select2.full.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10573,8 +10573,9 @@ define('select2/selection/allowClear',[
1057310573
});
1057410574

1057510575
define('select2/selection/search',[
10576-
'../utils'
10577-
], function (Utils) {
10576+
'../utils',
10577+
'../keys'
10578+
], function (Utils, KEYS) {
1057810579
function Search (decorated, $element, options) {
1057910580
decorated.call(this, $element, options);
1058010581
}
@@ -10618,6 +10619,19 @@ define('select2/selection/search',[
1061810619
self.trigger('keypress', evt);
1061910620

1062010621
self._keyUpPrevented = evt.isDefaultPrevented();
10622+
10623+
var key = evt.which;
10624+
10625+
if (key === KEYS.BACKSPACE && self.$search.val() === '') {
10626+
var $previousChoice = self.$searchContainer
10627+
.prev('.select2-selection__choice');
10628+
10629+
if ($previousChoice.length > 0) {
10630+
var item = $previousChoice.data('data');
10631+
10632+
self.searchRemoveChoice(item);
10633+
}
10634+
}
1062110635
});
1062210636

1062310637
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -10654,6 +10668,16 @@ define('select2/selection/search',[
1065410668
this._keyUpPrevented = false;
1065510669
};
1065610670

10671+
Search.prototype.searchRemoveChoice = function (item) {
10672+
this.trigger('unselected', {
10673+
data: item
10674+
});
10675+
10676+
this.trigger('open');
10677+
10678+
this.$search.val(item.text + ' ');
10679+
};
10680+
1065710681
Search.prototype.resizeSearch = function () {
1065810682
this.$search.css('width', '25px');
1065910683

‎dist/js/select2.full.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1466,8 +1466,9 @@ define('select2/selection/allowClear',[
14661466
});
14671467

14681468
define('select2/selection/search',[
1469-
'../utils'
1470-
], function (Utils) {
1469+
'../utils',
1470+
'../keys'
1471+
], function (Utils, KEYS) {
14711472
function Search (decorated, $element, options) {
14721473
decorated.call(this, $element, options);
14731474
}
@@ -1511,6 +1512,19 @@ define('select2/selection/search',[
15111512
self.trigger('keypress', evt);
15121513

15131514
self._keyUpPrevented = evt.isDefaultPrevented();
1515+
1516+
var key = evt.which;
1517+
1518+
if (key === KEYS.BACKSPACE && self.$search.val() === '') {
1519+
var $previousChoice = self.$searchContainer
1520+
.prev('.select2-selection__choice');
1521+
1522+
if ($previousChoice.length > 0) {
1523+
var item = $previousChoice.data('data');
1524+
1525+
self.searchRemoveChoice(item);
1526+
}
1527+
}
15141528
});
15151529

15161530
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -1547,6 +1561,16 @@ define('select2/selection/search',[
15471561
this._keyUpPrevented = false;
15481562
};
15491563

1564+
Search.prototype.searchRemoveChoice = function (item) {
1565+
this.trigger('unselected', {
1566+
data: item
1567+
});
1568+
1569+
this.trigger('open');
1570+
1571+
this.$search.val(item.text + ' ');
1572+
};
1573+
15501574
Search.prototype.resizeSearch = function () {
15511575
this.$search.css('width', '25px');
15521576

‎dist/js/select2.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/select2/selection/search.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
define([
2-
'../utils'
3-
], function (Utils) {
2+
'../utils',
3+
'../keys'
4+
], function (Utils, KEYS) {
45
function Search (decorated, $element, options) {
56
decorated.call(this, $element, options);
67
}
@@ -44,6 +45,19 @@ define([
4445
self.trigger('keypress', evt);
4546

4647
self._keyUpPrevented = evt.isDefaultPrevented();
48+
49+
var key = evt.which;
50+
51+
if (key === KEYS.BACKSPACE && self.$search.val() === '') {
52+
var $previousChoice = self.$searchContainer
53+
.prev('.select2-selection__choice');
54+
55+
if ($previousChoice.length > 0) {
56+
var item = $previousChoice.data('data');
57+
58+
self.searchRemoveChoice(item);
59+
}
60+
}
4761
});
4862

4963
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -80,6 +94,16 @@ define([
8094
this._keyUpPrevented = false;
8195
};
8296

97+
Search.prototype.searchRemoveChoice = function (item) {
98+
this.trigger('unselected', {
99+
data: item
100+
});
101+
102+
this.trigger('open');
103+
104+
this.$search.val(item.text + ' ');
105+
};
106+
83107
Search.prototype.resizeSearch = function () {
84108
this.$search.css('width', '25px');
85109

0 commit comments

Comments
 (0)