JSFiddle - React, Tailwind, and code Playground

by JigneshManek

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>
    <option value="1">abc</option>
    <option value="2">def</option>
    <option value="3">ghi</option>
</select>
<br>
<button>Press this button. Now chosen will not be focused! Why??</button>

CSS

body {
    margin: 10px;
}

select {
    width: 200px;
}

JavaScript

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

    $('button').click(function() {
        $('select').chosen().focus();
    });

});