JSFiddle - React, Tailwind, and code Playground

by koenpunt

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://c23c2dc6.eu.ngrok.io/chosen.css">
<script src="https://c23c2dc6.eu.ngrok.io/chosen.jquery.js"></script>
<h1>With Chosen...</h1>

<select name="source" id="source" style="width: 300px;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<br />
<label for="testfield">To focus or not to focus?</label>
<br />
<input id="testfield" type="text" name="testfield" value="" style="width: 300px;" placeholder="This should get the focus... yet it does not.">
<br /><br />
<hr>

<h1>...and without</h1>

<select name="source2" id="source2" style="width: 300px;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<br />
<label for="testfield">To focus or not to focus?</label>
<br />
<input id="testfield2" type="text" name="testfield2" value="" style="width: 300px;" placeholder="This should get the focus... and it does.">

JavaScript

$(function () {

    $('#source').chosen();

    $('#source').change(function () {
        var source = $(this).val();
        if (source == 2) {
            $('#testfield').focus();
        }
    });

    $('#source2').change(function () {
        var source2 = $(this).val();
        if (source2 == 2) {
            $('#testfield2').focus();
        }
    });
});