Select2 Open Dropdown on (Tab) Focus 4.07

by Kyle Mitofsky

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>
<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 no-search" >
      <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>
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Carrot</option>
      <option value="4">Donut</option>
    </select>
  </div>
 ...

CSS

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

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

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

select[multiple] > option:first-child {
    height: 23px;
}

JavaScript

// initialize select 2
$('.select2:not(.no-search)').select2({
  placeholder: "Favorite Fruit",
});

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


// on first focus (bubbles up to document), open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
  $(this).closest(".select2-container").siblings('select:enabled').select2('open');
});

// steal focus during close - only capture once and stop propogation
$('select.select2').on('select2:closing', function (e) {
  $(e.target).data("select2").$selection.one('focus focusin', function (e) {
    e.stopPropagation();
  });
});


// logging info
$('.select2-selection').on('focus blur', LogFocusEvent);
$('.select2.select2-container').on('keydown keyup', LogKeyEvent);
$('.select2.select2-container').on('click', LogMouseEvent);
$('select.select2').on('select2:open select2:closing select2:close', LogSelect2Event);


function LogKeyEvent(e) {
  var KEYS = { "9": "Tab", "13": "Enter" }
  if (KEYS[e.which]) {
    console.log("%c "+KEYS[e.which]+" "+e.type+" event ", "background:blue; color:white", e)
  } 
}
function LogFocusEvent(e) {
	console.log("%c "+e.type+" event ", "background:green; color:white", e)
}
function LogMouseEvent(e) {
	console.log("%c "+e.type+" event ", "background:blue; color:white", e)
}
function LogSelect2Event(e) {
	console.log("%c "+e.type+" event ", "background:darkorange; color:white", e)
}