javascript - Blur Select2 input after close

Question

I want the select2 element to lose the focus when the select2-close event is triggered, what I have tried so far was:

.on("select2-close", function (e) {
    var $focused = $(':focus');
    $focused.blur();
});

and some variations to get focused element like document.activeElement, $(e.target) non f these worked.

JSFiddle

Answer 1

You need to remove the .select2-container-active class from the containing divider:

.on("select2-close", function () {
    setTimeout(function() {
        $('.select2-container-active').removeClass('select2-container-active');
        $(':focus').blur();
    }, 1);
});

I've used a setTimeout here as a hacky way to ensure that this triggers after the plugin itself finalises the close.

JSFiddle demo.