RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-03-10 06:36:08 +03:00
Code Issues Projects Releases Wiki Activity

Add back keyboard support within allowClear

Browse Source 
This adds back keyboard support, so you can now clear a selected
item using either the backspace or delete key.  This only work when
the container is closed, to prevent issues with the selection being
clear while a user is searching.

This was a regression in accessibility from 3.x.

This closes https://github.com/select2/select2/issues/3224.
This commit is contained in:
Kevin Brown 2015-04-02 11:12:11 -04:00
parent 00a78bdb1e
commit a8e6cbc0c9
5 changed files with 180 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
dist/js/select2.full.js vendored
View File

@ -1638,8 +1638,9 @@ S2.define('select2/selection/placeholder',[
});
S2.define('select2/selection/allowClear',[
'jquery'
], function ($) {
'jquery',
'../keys'
], function ($, KEYS) {
function AllowClear () { }
AllowClear.prototype.bind = function (decorated, container, $container) {
@ -1647,8 +1648,8 @@ S2.define('select2/selection/allowClear',[
decorated.call(this, container, $container);
if (self.placeholder == null) {
if (self.options.get('debug') && window.console && console.error) {
if (this.placeholder == null) {
if (this.options.get('debug') && window.console && console.error) {
console.error(
'Select2: The `allowClear` option should be used in combination ' +
'with the `placeholder` option.'
@ -1658,14 +1659,32 @@ S2.define('select2/selection/allowClear',[
this.$selection.on('mousedown', '.select2-selection__clear',
function (evt) {
self._handleClear(evt);
});
container.on('keypress', function (evt) {
self._handleKeyboardClear(evt, container);
});
};
AllowClear.prototype._handleClear = function (_, evt) {
console.log(arguments);
// Ignore the event if it is disabled
if (self.options.get('disabled')) {
if (this.options.get('disabled')) {
return;
}
var $clear = this.$selection.find('.select2-selection__clear');
// Ignore the event if nothing has been selected
if ($clear.length === 0) {
return;
}
evt.stopPropagation();
var data = $(this).data('data');
var data = $clear.data('data');
for (var d = 0; d < data.length; d++) {
var unselectData = {
@ -1674,7 +1693,7 @@ S2.define('select2/selection/allowClear',[
// Trigger the `unselect` event, so people can prevent it from being
// cleared.
self.trigger('unselect', unselectData);
this.trigger('unselect', unselectData);
// If the event was prevented, don't clear it out.
if (unselectData.prevented) {
@ -1682,10 +1701,19 @@ S2.define('select2/selection/allowClear',[
}
}
self.$element.val(self.placeholder.id).trigger('change');
this.$element.val(this.placeholder.id).trigger('change');
self.trigger('toggle');
});
this.trigger('toggle');
};
AllowClear.prototype._handleKeyboardClear = function (_, evt, container) {
if (container.isOpen()) {
return;
}
if (evt.which == KEYS.DELETE || evt.which == KEYS.BACKSPACE) {
this._handleClear(evt);
}
};
AllowClear.prototype.update = function (decorated, data) {

6
dist/js/select2.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

48
dist/js/select2.js vendored
View File

@ -1638,8 +1638,9 @@ S2.define('select2/selection/placeholder',[
});
S2.define('select2/selection/allowClear',[
'jquery'
], function ($) {
'jquery',
'../keys'
], function ($, KEYS) {
function AllowClear () { }
AllowClear.prototype.bind = function (decorated, container, $container) {
@ -1647,8 +1648,8 @@ S2.define('select2/selection/allowClear',[
decorated.call(this, container, $container);
if (self.placeholder == null) {
if (self.options.get('debug') && window.console && console.error) {
if (this.placeholder == null) {
if (this.options.get('debug') && window.console && console.error) {
console.error(
'Select2: The `allowClear` option should be used in combination ' +
'with the `placeholder` option.'
@ -1658,14 +1659,32 @@ S2.define('select2/selection/allowClear',[
this.$selection.on('mousedown', '.select2-selection__clear',
function (evt) {
self._handleClear(evt);
});
container.on('keypress', function (evt) {
self._handleKeyboardClear(evt, container);
});
};
AllowClear.prototype._handleClear = function (_, evt) {
console.log(arguments);
// Ignore the event if it is disabled
if (self.options.get('disabled')) {
if (this.options.get('disabled')) {
return;
}
var $clear = this.$selection.find('.select2-selection__clear');
// Ignore the event if nothing has been selected
if ($clear.length === 0) {
return;
}
evt.stopPropagation();
var data = $(this).data('data');
var data = $clear.data('data');
for (var d = 0; d < data.length; d++) {
var unselectData = {
@ -1674,7 +1693,7 @@ S2.define('select2/selection/allowClear',[
// Trigger the `unselect` event, so people can prevent it from being
// cleared.
self.trigger('unselect', unselectData);
this.trigger('unselect', unselectData);
// If the event was prevented, don't clear it out.
if (unselectData.prevented) {
@ -1682,10 +1701,19 @@ S2.define('select2/selection/allowClear',[
}
}
self.$element.val(self.placeholder.id).trigger('change');
this.$element.val(this.placeholder.id).trigger('change');
self.trigger('toggle');
});
this.trigger('toggle');
};
AllowClear.prototype._handleKeyboardClear = function (_, evt, container) {
if (container.isOpen()) {
return;
}
if (evt.which == KEYS.DELETE || evt.which == KEYS.BACKSPACE) {
this._handleClear(evt);
}
};
AllowClear.prototype.update = function (decorated, data) {

4
dist/js/select2.min.js vendored
View File

File diff suppressed because one or more lines are too long

46
src/js/select2/selection/allowClear.js vendored
View File

@ -1,6 +1,7 @@
define([
'jquery'
], function ($) {
'jquery',
'../keys'
], function ($, KEYS) {
function AllowClear () { }
AllowClear.prototype.bind = function (decorated, container, $container) {
@ -8,8 +9,8 @@ define([
decorated.call(this, container, $container);
if (self.placeholder == null) {
if (self.options.get('debug') && window.console && console.error) {
if (this.placeholder == null) {
if (this.options.get('debug') && window.console && console.error) {
console.error(
'Select2: The `allowClear` option should be used in combination ' +
'with the `placeholder` option.'
@ -19,14 +20,30 @@ define([
this.$selection.on('mousedown', '.select2-selection__clear',
function (evt) {
self._handleClear(evt);
});
container.on('keypress', function (evt) {
self._handleKeyboardClear(evt, container);
});
};
AllowClear.prototype._handleClear = function (_, evt) {
// Ignore the event if it is disabled
if (self.options.get('disabled')) {
if (this.options.get('disabled')) {
return;
}
var $clear = this.$selection.find('.select2-selection__clear');
// Ignore the event if nothing has been selected
if ($clear.length === 0) {
return;
}
evt.stopPropagation();
var data = $(this).data('data');
var data = $clear.data('data');
for (var d = 0; d < data.length; d++) {
var unselectData = {
@ -35,7 +52,7 @@ define([
// Trigger the `unselect` event, so people can prevent it from being
// cleared.
self.trigger('unselect', unselectData);
this.trigger('unselect', unselectData);
// If the event was prevented, don't clear it out.
if (unselectData.prevented) {
@ -43,10 +60,19 @@ define([
}
}
self.$element.val(self.placeholder.id).trigger('change');
this.$element.val(this.placeholder.id).trigger('change');
self.trigger('toggle');
});
this.trigger('toggle');
};
AllowClear.prototype._handleKeyboardClear = function (_, evt, container) {
if (container.isOpen()) {
return;
}
if (evt.which == KEYS.DELETE || evt.which == KEYS.BACKSPACE) {
this._handleClear(evt);
}
};
AllowClear.prototype.update = function (decorated, data) {