Focusing input after triggering event "Select2"

Question

I always read the "change" -event trigger for <select>, even if the selected select2-option was already selected , and since the problem was so close to my question, I asked my question, but there was no answer. My problem is that I have a select-box created by Select2 and text input. What I want to achieve, after Select2 closed (no matter what value is changed or not), my text input becomes focus .

So, I did something logically, as follows:

$('#select').select2({placeholder: 'City'});
$('#select')
.on('select2-close', function (e) {
   $('#hey').focus();
});

http://jsfiddle.net/sobhanattar/x49F2/8/

As you can see, text input does not take focus. After some digging into the Select2 document and checking part of the documentation related to the events, I realized that after the Close event, the automatic Focus event occurs. This means that after closing Select2 select-Box, it focuses. So I changed my code to something like this:

$('#select').select2({placeholder: 'City'});
$('#select')
.on('select2-close', function (e) {
       $('#select').blur();
})
.on('select2-blur', function(e) {
      $('#hey').focus();
});

And everything works fine. Now I want to know that my understanding of the Select2 selection order was correct, or I missed something in the middle.

Answer 1

look here, this question already has the answer: Blur select2 after closing

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

elementid - id, select2 closese. $("#elementid").focus(); .

Answer 2

css:

html, body {
    height:100%
}