Open select2 on focus

by Gavin Paolucci-Kleinow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link rel="stylesheet" href="https://select2.github.io/dist/css/select2.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-12">
           <h1 class="h3">Open select2 on focus</h1>
            <p>Click on the email input then use tab to change to select2 field. You will notice that select2 dropdown doesn't open.</p>
           <form action="#">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            <br>
            <label for="select2">Here is select2</label>
            <select class="form-control js-select" multiple="multiple">
                <option value="1">Option A</option>
                <option value="2">Option B</option>
                <option value="3">Option C</option>
            </select>
        </form> 
        </div>
    </div>
</div>

JavaScript

$('.js-select').select2({
     placeholder: "Select",
     width: "100%"
});
$.data($('.js-select')).select2.on("focus", function (e) {
    $($('.js-select')).select2("open");
});