Focusing Input after Select2 close event fire

select2 trigger click
select2 keypress event
select2 search event
select2 on change get value
select2 selected
jquery trigger select dropdown
select2 remove option
select2 on remove event

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

So I did something logically fine as follow:

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

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

As you can see, the text input doesn't accept focus. After some digging in Select2 document and inspecting Events part of documentation, I realized that after Close event, there is a Focus event fire automatically. It means that after you close a Select2 select-Box, it focuses itself. 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 it works just fine. Now I want to know that my understanding from Select2 order of events was correct or I missed something in the middle.

take a look here, this question is already has an answer: Blur select2 input after close

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

elementid is the id element you want to be focused after select2 closese. i have just added $("#elementid").focus(); to the answer at link.

Select2 open dropdown on focus, I have a form with multiple text inputs and some select2 elements. One way that seems to work is to attach an event handler during the closing event for the As noted in this github issue #4025 - Dropdown does not open on tab focus, we event that fires the handler, it must fire the open method only if the event is focus. The problem arises when someone makes a selection from the dropdown. Because it is multiselect, the dropdown closes, but the select2 element still has "focus" in that it's still awaiting input from the user. Is there a different event that I can hook into to mimic a "focus" & "blur" event with select2?

Try this one as it works:

$('#select2').on('select2:close', function (e)
{
   // your focus code for element
});

imitate focus event possible? · Issue #472 · select2/select2 · GitHub, I'm trying to mimic the focus event of a select2 object when imitate focus event possible? #472. Closed. Zxurian opened this issue on Oct 5, 2012 · 2 comments clicks inside the box, the dropdown will open, and the trigger will fire, but the select2 element still has "focus" in that it's still awaiting input from the user. I also have the same problem. I have a select2() drop-down and a input box. At first the focus will be on drop down so when the user hit Enter key the drop down will be opened. In onchange method of drop down I am adding focus to the text box using focus() method of jQuery. But it is not focusing to text box, rather it focus to the drop down

use css:

html, body {
    height:100%
}

Select2 does not respond to .focus() or clicking the label · Issue , Input gets no focus when clicking on label and it even jumps to the top of page Select2 does not respond to .focus() or clicking the label #2311. Closed code refactoring since the this version, it would be nice to register this focus event in  select2:closing is fired before this and can be prevented. select2:opening: Triggered before the dropdown is opened. This event can be prevented. select2:open: Triggered whenever the dropdown is opened. select2:opening is fired before this and can be prevented. select2:selecting: Triggered before a result is selected. This event can be prevented. select2:select

Events, You may also manually trigger these events on a Select2 control using .trigger . select2:close, Triggered whenever the dropdown is closed. select2:closing is  When you have a hidden input with tag support, removing the tag only triggers a change event. select2-removed event doesn't fire. Example: On the project page, under events, removing "bug" from the select field will log: removed val=1 ch

Select2 3.5.3, Select2 supports a minimum input setting which is useful for large remote open event is triggered on the original element whenever the dropdown If set to false the dropdown is not closed after a selection is made, allowing for This option can be used to trigger the load sooner, possibly resulting in a select2-focus. Destroying the Select2 control. The destroy method will remove the Select2 widget from the target element. It will revert back to a standard select control: $('#mySelect2').select2('destroy'); Event unbinding. When you destroy a Select2 control, Select2 will only unbind the events that were automatically bound by the plugin.

jQuery blur() Method, The blur event occurs when the <input> field loses focus: alert("This input field has lost its focus."); }); Trigger the blur event for the selected elements:. Actually my mistake in describing - the change event does fire but it does after the select2:unselect. This was more related to issue #3320 when the select2 does not close on clearing. Was trying to trap the value of the input after select2:unselect and not after a normal change. It shows the old value on unselect unlike the change.

Comments
  • In the newer versions of Select2 the event name is now select2:close (colon instead of dash).