Disable dropdown opening on select2 clear
I had a problem with a short delay after deselecting one of the items and this solution fixed that issue for me:
$(this).select2({
multiple: 'multiple',
}).on("select2:unselecting", function(e) {
var self = $(this);
setTimeout(function() {
self.select2('close');
}, 0);
});
You don't require a timeout to make this work, here's my example:
$('#my-select').select2({
allowClear: true
}).on('select2:unselecting', function() {
$(this).data('unselecting', true);
}).on('select2:opening', function(e) {
if ($(this).data('unselecting')) {
$(this).removeData('unselecting');
e.preventDefault();
}
});
Can confirm, preventing events seems to not work for some reason, so you can just close the dropdown after some timeout:
$("select").select2({
allowClear: true
}).on("select2:unselecting", function(e) {
$(this).data('state', 'unselected');
}).on("select2:open", function(e) {
if ($(this).data('state') === 'unselected') {
$(this).removeData('state');
var self = $(this);
setTimeout(function() {
self.select2('close');
}, 1);
}
});
Here's a working fiddle: http://jsfiddle.net/obq3yLf2/