JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.css">
<input type="text" value="" style="width:100%">
<br>
<select id="select">
    <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

var isopened = false;
$(document).ready(function() {
    
    $('#select').chosen();
    
    $('body').on('focus', '.chosen-container-single input', function(){
        if (!$(this).closest('.chosen-container').hasClass('chosen-container-active')){
            $(this).closest('.chosen-container').trigger('mousedown');
            //or use this instead
            //$('#select').trigger('liszt:open');
        }    
    });
});