Tabbing with Select2 is Not Good

Select2 should tab to the next element and open the options of that element if it's another Select2 object. At least that's what I think

by iamjpg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<div>
  <select>
    <option>asdfasdfafsd</option>
    <option>asfdasdfsadf</option>
    <option>asdfafsdafsd</option>
    <option>asdfasdfafsd</option>
  </select>
</div>

<div>
  <select>
    <option>asdfafsdasdfafds</option>
    <option>asdfasdfasdf</option>
    <option>asdfasdfasdfasdf</option>
    <option>asdfasfdasdf</option>
  </select>
</div>

<div>
  <select>
    <option>asdfafsdasdfafds</option>
    <option>asdfasdfasdf</option>
    <option>asdfasdfasdfasdf</option>
    <option>asdfasfdasdf</option>
  </select>
</div>

<div>
  <select>
    <option>asdfafsdasdfafds</option>
    <option>asdfasdfasdf</option>
    <option>asdfasdfasdfasdf</option>
    <option>asdfasfdasdf</option>
  </select>
</div>

CSS

div {
  margin: 25px;
}

select {
  width: 200px;
}

JavaScript

$('select').select2();