title: Opened jquery select2 dropdown breaks tabindex
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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'
    }]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;&lt;input type="text" id="1" tabindex="1" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="text" id="2" tabindex="2" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;select name="2"   id="3" tabindex="3"&gt;&lt;/select&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="text" id="4" tabindex="4"/&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>