Opened jquery select2 dropdown breaks tabindex

Question

Due to a legacy front-end I got this hacky listener for opening my select2 (v4.0) dropdown upon focussing the select element. It works just fine, except for the fact that my tabindex is somehow set back to 1 when I press tab on the opened select2. How can I make it so that my dropdown closes and input#4 is focussed when I hit tab from within the opened dropdown?

var openedSelectEl;
// open select2 dropdown on focus
$(document).on('focus', 'select:enabled + span .select2-selection--single', function(e) {
    openedSelectEl = $(this).parent().parent().siblings('select');
    openedSelectEl.select2('open');
});

$("#3").select2({
  data: [{
    id: 'f00',
    text: 'f00'
  }, {
    id: 'b4r',
    text: 'b4r'
  }, {
    id: 'b4z',
    text: 'b4z'
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div><input type="text" id="1" tabindex="1" /></div>
<div><input type="text" id="2" tabindex="2" /></div>
<div><select name="2"   id="3" tabindex="3"></select></div>
<div><input type="text" id="4" tabindex="4"/></div>

Answer 1

I think should try this:

$(yourSelectSelectors).on("select2:close", function (e) {
    e.target.focus();
});`

Documentation on events

Answer 2

Building on zDaniels excellent answer in this question

I have created a bower installable shim that will solve the select2 tab index issue.

$ bower install select2-tab-fix

Source and documentation at

https://github.com/peledies/select2-tab-fix