JSFiddle - React, Tailwind, and code Playground

HTML

<select id="sel"><option>1</option><option>2</option><option>3</option><option>4</option></select>
<input type="text">
<p>The select has a function attached to the change event which adds the current value in a div below this.</p>
<p>If you click on the select, and choose a different value, the new value will be shown below.</p>
<p>Or, if the focus is on the select, you can use the up/down arrows to choose a value, and when you tab to the input field the new value will be shown below.</p>
<p>However, if you focus to the select, then use the arrow keys to select a different value, then <b>without tabbing off the select</b> use the mouse to drop down the field and <b>choose the same (new) value</b>, the new value will not be displayed. Even if you tab off the select.</p>
</div>
<div id="log"></div>

JavaScript

var log;
var sel;
function changed() {
    log.append("<div>" + sel.val() + "</div>");
}
$(document).ready(function() {
    log = $("#log");
    sel = $("#sel");
    sel.change(changed);
});