Select2 Open Dropdown on (Tab) Focus

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css">
<div class="selects">

  <div class="form-control">
    <label for="foods1" >Normal</label>
    <select id="foods1" >
      <option value=""></option>
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Carrot</option>
      <option value="4">Donut</option>
    </select>
  </div>

  <div class="form-control">
    <label for="foods2" >Select2</label>
    <select id="foods2" class="select2-nosearch" >
      <option value=""></option>
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Carrot</option>
      <option value="4">Donut</option>
    </select>
  </div>


  <div class="form-control">
    <label for="foods3" >Select2 + Search</label>
    <select id="foods3" class="select2" >
      <option value=""></option>
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Carrot</option>
      <option value="4">Donut</option>
    </select>
  </div>


  <div class="form-control">
    <label for="foods4" >Select2 + Multi</label>
    <select id="foods4" class="select2" multiple="multiple" >
      <option value=""></option>
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Carrot</option>
      <option value="4">Donut</option>
    </select>
  </div>
 
   <div class="form-control">
    <label for="foods5" >Select2 + Disabled</label>
    <select id="foods5" class="select2" disabled >
      <option value=""></option>
     ...

CSS

body {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.selects {
  margin-bottom: 20px;
}

.form-control {
  padding: 5px;
  display: flex;
  flex-direction: column;
}

select {
  width: 200px;
  border: 1px solid #aaa;
  border-radius: 4px;
  height: 28px;
  overflow: hidden;
}

/* minimal toasts */
#toast-container#toast-container > .toast {
    background-image: none !important;
    padding: 8px;
    width: 150px;
}

JavaScript

$('.select2').select2({
  placeholder: "Favorite Fruit",
});

$('.select2-nosearch').select2({
  minimumResultsForSearch: 20,
  placeholder: "Favorite Fruit",
}); 



$(document).on('focus', '.select2.select2-container', function (e) {
  
  var isOriginalEvent = e.originalEvent // don't re-open on closing focus event
  var isSingleSelect = $(this).find(".select2-selection--single").length > 0 // multi-select will pass focus to input

  if (isOriginalEvent && isSingleSelect) {
    $(this).siblings('select:enabled').select2('open');
  } 

});



// logging info
$(document).on('focus', '.select2.select2-container', function (e) {
	if ($("#showFocus").is(":checked")) toastr.success("Focus Event")
  console.log("%c Focus Event ", "background:green; color:white", e)
});

$(document).on('select2:open', 'select.select2, select.select2-nosearch', function (e) {
	if ($("#showOpen").is(":checked")) toastr.warning("Select2 Open")
  console.log("%c Select2 Open ","background:orange; color:white", e)
});

$(document).on('click', '.select2.select2-container', function (e) {
	if ($("#showClick").is(":checked")) toastr.info("Click Event")
  console.log("%c Click Event ", "background:blue; color:white", e)
});

$(document).on('keyup', '.select2.select2-container', function (e) {
	if (e.which == 9) {
  	if ($("#showTab").is(":checked")) toastr.info("Tab Event")
    console.log("%c Tab Event ", "background:blue; color:white", e)
  } 
});



toastr.options = {
  "newestOnTop": true,
  "progressBar": true,
  }