Open select2 on focus

by Irvin Dominin

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%"
})

$('.js-select').next('.select2').find('.select2-selection').one('focus', select2Focus).on('blur', function () {
    $(this).one('focus', select2Focus)
})

function select2Focus() {
	$(this).closest('.select2').prev('select').select2('open');
}