JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<b>Instructions</b><br />
Notice how the select has values for a, b, c, d, and e.<br />
<button>Click here to focus the select</button><br />
We want to enter in a, b, c, d, and e as fast as possible with the keyboard.<br />
To do this, press a, Enter, b, Enter, c, Enter, d, Enter, e, Enter, etc.<br />
If you're fast enough, the select doesn't change values between Enter's, and you get a list of the same item.<br />
What can we do to the select so that pressing Enter resets the type-a-value feature?<br />

<select>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
    <option>e</option>
</select>

<ol>
</ol>

JavaScript

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

$('select').on('keydown',function(e) {
    if (e.which === 13) { // Enter
        $('ol').append('<li>' + this.value + '</li>');
        var newSelect = $(this).clone(true).val(this.value);
        $(this).replaceWith(newSelect);
        newSelect.focus();
    }
});