JSFiddle - React, Tailwind, and code Playground

by Martin Parenteau

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="mySelect">
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
</select>
<button id="myButton">Focus through onclick</button>
<input id="myTextInput" type="text" />

CSS

#mySelect {
    width: 100px;
}

.select2-container {
    font-size: 0.8em;
    font-family: Arial, Helvetica;
}

.select2-container--default .select2-selection--single {
    border-color: black;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: black;
}

JavaScript

var mySelect = document.getElementById('mySelect');
var myButton = document.getElementById('myButton');
var myTextInput = document.getElementById('myTextInput');
var myConsole = document.getElementById('myConsole');
var firstOpen = true;

$(mySelect).select2({
    minimumResultsForSearch: Infinity
}).on('change', function(e) {
    console.log("change event was fired");
}).on('select2:open', function(e) {
    if (firstOpen) {
        firstOpen = false;
        $('.select2-results ul').on('mouseup', function(e) {
            myTextInput.focus();
        });
    }
});

myButton.addEventListener('click', function(clickEvent) {
    myTextInput.focus();
});