Disable dropdown opening on select2 clear

27
votes

Seems that select2 4 opens by default the dropdown when clearing the current selected item. Previous versions of select2 didn't seem to have that behaviour and I'm trying to achieve it but no luck for now.

Does anyone know how to hook into the clear event so we can disable it's default behaviour and clear the selected option without opening the dropdown?

Cheers, Al

5
jqueryjquery-select2
Assuming that this is a single select, you can preventDefault on the select2:closing event that is triggered right after select2:unselect. At another time I can write up a more complete answer. – Kevin Brown-Silva
Thanks Kevin, I had a try but I get the error "Cannot set property 'prevented' of undefined" when preventDefault on select2:closing. I've put together a quick fiddle at jsfiddle.net/r56zh872 any help will be appreciated. – Alberto
@KevinBrown Is there any upstream issue created for this situation? – Vladislav Rastrusny
@VladislavRastrusny Not that I consider it a bug, but this ticket was opened about it. – Kevin Brown-Silva

5 Answers

72
votes

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();
    }
});
16
votes

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/

3
votes

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);
});
0
votes

Another simple Implementation:

$('select').on('select2:unselect', function(evt) {
    $(this).select2({
        placeholder : {
            id : '',
            text : '---None Selected---'
        },
        allowClear : true,
        theme : "bootstrap"
    }).select2('close');
});
0
votes

Here is your answer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>


<select id="my-select">
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select>



<script>
$('#my-select').select2().on('select2:opening', function(currentEvent) {
  currentEvent.preventDefault();
});
</script>