JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<script src="http://harvesthq.github.com/chosen/chosen/chosen.jquery.js"></script>
<input type="text" value="Put your cursor here then Press Tab. Chosen will be focused!" style="width:100%">
<br>
<select id="select" multiple>
    <option value="1">abc</option>
    <option value="2">def</option>
    <option value="3">ghi</option>
</select>
<br>
<button>Press this button. Now chosen <b>will</b> be focused! :)</button>

CSS

body {
    margin: 10px;
}

select {
    width: 200px;
}

JavaScript

$(document).ready(function() {
    
    $('#select').chosen();

    $('#select_chzn').on('focus', '.chzn-choices', function(e){
        e.preventDefault();
        alert('focused!');
    });
    
    $('button').click(function() {
        $('#select').data('chosen').activate_action();
    });

});