javascriptjqueryjquery-select2

jQuery Select2 - Use tab to select an option


I'd like to be able to use the arrow keys to get to the select2 option I want and then press tab to select that option and then tab to the next element as usual.

I already got the down arrow to open the select2 with the following:

$(document).on('keydown', '.select2', function(e) {
  if (e.originalEvent && e.which == 40) {
    e.preventDefault();
    $(this).siblings('select').select2('open');
  } 
});

And I can also use the arrows to get where I need to go. Now I'm struggling to make the tab part work.

I'm assuming since the select2-search__field has focus at the time I'm pressing the key, that that is the element I bind the event to? And then presumably I need to get the value of the currently highlighted option and trigger the select2 change?

I'm not 100% sure this is the right approach but I can't quite figure it out.


Solution

  • To achieve this you can use selectOnClose: true:

    $(document).on('keydown', '.select2', function(e) {
      if (e.originalEvent && e.which == 40) {
        e.preventDefault();
        $(this).siblings('select').select2('open');
      }
    });
    
    $('select').select2({
      selectOnClose: true
    });
    select {
      min-width: 150px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
    <select>
      <option>AAAAA</option>
      <option>BBBB</option>
      <option>CCCC</option>
      <option>DDDD</option>
      <option>EEEE</option>
      <option>FFFF</option>
      <option>GGGG</option>
    </select>