## Working Code for v4.0+ <sup><sup>*(*including 4.0.7)*</sup></sup>

The following code will open the menu on the *initial* focus, but won't get stuck in an infinite loop when the selection re-focuses after the menu closes.

```js
// on first focus (bubbles up to document), open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
  $(this).closest(".select2-container").siblings('select:enabled').select2('open');
});

// steal focus during close - only capture once and stop propogation
$('select.select2').on('select2:closing', function (e) {
  $(e.target).data("select2").$selection.one('focus focusin', function (e) {
    e.stopPropagation();
  });
});
```

## Explanation

### Prevent Infinite Focus Loop

**Note**: The `focus` event is *fired twice*

1. Once when tabbing into the field
2. Again when tabbing with an open dropdown to restore focus

![focus menu states][1]

We can prevent an infinite loop by looking for differences between the types of focus events.  Since we only want to open the menu on the initial focus to the control, we have to somehow distinguish between the following raised events:

[![event timeline][2]][2]

Doing so it a cross browser friendly way is hard, because browsers send different information along with different events and also Select2 has had many minor changes to their internal firing of events, which interrupt previous flows.  

One way that seems to work is to attach an event handler during the [`closing`][15] event for the menu and use it to capture the impending `focus` event and prevent it from bubbling up the DOM.  Then, using a delegated listener, we'll call the actual focus -> open code only when the `focus` event bubbles all the way up to the `document`


### Prevent Opening Disabled Selects

As noted in this github issue [#4025 - Dropdown does not open on tab focus][4], we should check to make sure we only call `'open'` on `:enabled` select elements like this:



<pre><code>$(this).siblings('select<b>:enabled</b>').select2('open');</b></code></pre>

### Select2 DOM traversal

We have to traverse the DOM a little bit, so here's a map of the HTML structure generated by Select2

[![Select2 DOM][5]][5]

### Source Code on GitHub

Here are some of the relevant code sections in play:

[`.on('mousedown'` ... `.trigger('toggle')`][10]  
[`.on('toggle'`  ... `.toggleDropdown()`][6]   
[`.toggleDropdown` ... `.open()`][7]  
[`.on('focus'` ... `.trigger('focus'`][11]  
[`.on('close'` ... `$selection.focus()`][12]  

It used to be the case that opening select2 fired twice, but it was fixed in [Issue #3503][8] and that should prevent some jank

[PR #5357][13] appears to be what broke the previous focus code that was working in 4.05

### [Working Demo in jsFiddle][9] & Stack Snippets:





    $('.select2').select2({});

    // on first focus (bubbles up to document), open the menu
    $(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
      $(this).closest(".select2-container").siblings('select:enabled').select2('open');
    });

    // steal focus during close - only capture once and stop propogation
    $('select.select2').on('select2:closing', function (e) {
      $(e.target).data("select2").$selection.one('focus focusin', function (e) {
        e.stopPropagation();
      });
    });



    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>

    <select class="select2" style="width:200px" >
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Carrot</option>
      <option value="4">Donut</option>
    </select>



Tested on Chrome, FF, Edge, IE11




  [1]: https://i.stack.imgur.com/WrHwd.gif
  [2]: https://i.stack.imgur.com/6PLVr.png
  [3]: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget
  [4]: https://github.com/select2/select2/issues/4025
  [5]: https://i.stack.imgur.com/1NAg3.png
  [6]: https://github.com/select2/select2/blob/4.0.5/dist/js/select2.full.js#L5290
  [7]: https://github.com/select2/select2/blob/4.0.5/dist/js/select2.full.js#L5496
  [8]: https://github.com/select2/select2/issues/3503
  [9]: https://jsfiddle.net/KyleMit/hbeon3g2/
[10]: https://github.com/select2/select2/blob/4.0.7/src/js/select2/selection/single.js#L41
[11]: https://github.com/select2/select2/blob/4.0.7/src/js/select2/selection/base.js#L46
[12]: https://github.com/select2/select2/blob/4.0.7/src/js/select2/selection/base.js#L84
[13]: https://github.com/select2/select2/pull/5357
[15]: https://select2.org/programmatic-control/events

I have a form with multiple text inputs and some select2 elements. 
Using the keyboard to tab between fields works fine - the Select2 element behaves like a form element and receives focus when tabbing.
I was wondering if it is possible to open the dropdown when the Select2 element gets focus.

Here's what I've tried so far:

    $("#myid").select2().on('select2-focus', function(){
         $(this).select2('open');
    });

But using this code makes the dropdown to open again after a selection is made. 


Select2 open dropdown on focus

This could be trivially handled by modifying the original [source code on line 323][0] which treats tabs and esc keys identically:



    if (key === KEYS.ESC || key === KEYS.TAB || (key === KEYS.UP && evt.altKey)) {
        self.close();
        evt.preventDefault();
    }

But third party libraries should ideally be modified with a pull request. So we have a couple problems in creating a wrapper for this.  Principally, detecting a <kbd>tab</kbd> `keypress` event is *hard*.  If we catch it too late, another action might have superseded it or it might be fired on another field altogether.

The landscape of capturing tab events and persisting information seems to fall into two buckets:

1. Monitor before tab press and also after closed
2. Intercept tab press and modify synchronously

In either case, we must know that a <kbd>tab</kbd> key was the offending item that caused the menu to close.

If we listen for keypress events with tab, on an open input, they'll either occur from `.select2-selection` if there's no search or `select2-search__field` if search is enabled.



    $("body").on('keydown', e => { if (e.keyCode === 9) console.log(e.target) });

[![Select 2 Tab Events][1]][1]

**However**, if we setup as a delegated handler, as we have above, by the time the event bubbles up all the way up to "body", the menu has already closed, thus clearing the currently highlighted item and even our indicator of whether or not we started as open.

We can intercept *before* the menu closes by registering for the [**`select2:closing`**][2] event like this:



    $("body").on('select2:closing', e => { console.log(e,e.target) });

**However**, select 2 doesn't persist the original event information and instead makes their own new `jQueryEvent`, so we don't yet know if we're closing due to a tab event (the `body.keypress` event fires afterward)

-----

## Solution

We'll monitor the `select2:closing` event and capture what we need to know.  Next we need to attach a handler that listens for the subsequent firing of the initial click or a key stroke as the event pipeline is finished.  We need to fire this **once and only once** for **every** close option. To do so we can use this extension [`$.fn.once`][3].  If it was raised by a tab, it'll update whatever value detected during closing.  If not, that value and handler will disappear.

All told, it should look like this:



    // monitor every time we're about to close a menu
    $("body").on('select2:closing', function (e) {
      // save in case we want it
      var $sel2 = $(e.target).data("select2");
      var $sel = $sel2.$element;
      var $selDropdown = $sel2.$results.find(".select2-results__option--highlighted")
      var newValue =  $selDropdown.data("data").element.value;
      
      // must be closed by a mouse or keyboard - listen when that event is finished
      // this must fire once and only once for every possible menu close 
      // otherwise the handler will be sitting around with unintended side affects
      $("html").once('keyup mouseup', function (e) {
      
        // if close was due to a tab, use the highlighted value
        var KEYS = { UP: 38, DOWN: 40, TAB: 9 }
        if (e.keyCode === KEYS.TAB) {
          if (newValue != undefined) {
            $sel.val(newValue);
            $sel.trigger('change');
          }
        }
    
      });
      
    });
    
    $.fn.once = function (events, callback) {
        return this.each(function () {
            $(this).on(events, myCallback);
            function myCallback(e) {
                $(this).off(events, myCallback);
                callback.call(this, e);
            }
        });
    };

### Working demo in [jsFiddle][4] and StackSnippets:





    $('.select2').select2({});

    // monitor every time we're about to close a menu
    $("body").on('select2:closing', function (e) {
    	// save in case we want it
    	var $sel2 = $(e.target).data("select2");
      var $sel = $sel2.$element;
      var $selDropdown = $sel2.$results.find(".select2-results__option--highlighted")
      var newValue =  $selDropdown.data("data").element.value;

      // must be closed by a mouse or keyboard - setup listener to see when that event is completely done
      // this must fire once and only once for every possible menu close 
      // otherwise the handler will be sitting around with unintended side affects
      $("html").once('keyup mouseup', function (e) {

        // if close was due to a tab, use the highlighted value
        var KEYS = { UP: 38, DOWN: 40, TAB: 9 }
        if (e.keyCode === KEYS.TAB) {
          if (newValue != undefined) {
            $sel.val(newValue);
            $sel.trigger('change');
          }
        }

      });
      
    });

    $.fn.once = function (events, callback) {
        return this.each(function () {
            $(this).on(events, myCallback);
            function myCallback(e) {
                $(this).off(events, myCallback);
                callback.call(this, e);
            }
        });
    };



    .form-control {
      padding:10px;
      display:inline-block;
    }
    select {
      width: 100px;
      border: 1px solid #aaa;
      border-radius: 4px;
      height: 28px;
    }



    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

    <div class="form-control">
      <label for="foods2">Select2</label>
      <select id="foods2" class="select2" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>



[0]: https://github.com/select2/select2/blob/4.0.5/src/js/select2/core.js#L323
[1]: https://i.stack.imgur.com/XilM8.png
[2]: https://select2.org/programmatic-control/events
[3]: https://stackoverflow.com/a/24589200/1366033
[4]: https://jsfiddle.net/KyleMit/zo751wv3/64/

This has been the subject of the following *similar* SO Question and several github issues including:

* [**Stack Overflow** - jQuery Select2 Tag on Blur][1]
* [**#4578** - Tab and Esc should select the option][2]
* [**#4820** - TAB should select a result #4820][3]
* [**#3472** - Arrow keys do not change value of select ][4]


*But* the suggested solutions or questions have *treated all blur events equally*, regardless of how they were invoked.  With most answers leveraging [**Automatic selection**][5] by setting [`selectOnClose`][6].

Ideally, clicking off the dropdown (escaping) after merely hovering over options should not change the value:

[![SelectOnClose violation of principle of least surprise][7]][7]

How can you update the selection on tabout, but not other close events?

### Here's an MCVE in [jsFiddle][8] and StackSnippets:





    $('.select2').select2({});



    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

    <div class="form-control">
      <label for="foods2">Select2</label>
      <select id="foods2" class="select2" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>



  [1]: https://stackoverflow.com/questions/13820718/jquery-select2-tag-on-blur
  [2]: https://github.com/select2/select2/issues/4578
  [3]: https://github.com/select2/select2/issues/4820
  [4]: https://github.com/select2/select2/issues/3472
  [5]: https://select2.org/dropdown#automatic-selection
  [6]: https://select2.org/configuration/options-api
  [7]: https://i.stack.imgur.com/e5LlU.gif
  [8]: https://jsfiddle.net/KyleMit/zo751wv3/