JSFiddle - React, Tailwind, and code Playground
HTML
<input type=text name="textbox" id="textbox">
<select id="combobox">
<option value = 1>1</option>
<option value = 2>2</option>
<option value = 3>3</option>
</select>
CSS
#combobox {
display : none
}
JavaScript
var box_timer;
$("#combobox").mouseout(function(){
box_timer = setTimeout(function () {
var box_val = $("#combobox").hide().val();
$("#textbox").val(box_val).show();
}, 100);
}).mouseover(function () {
clearTimeout(box_timer);
});
$("#textbox").mouseover(function(){
$("#combobox").show();
$("#textbox").hide();
}).children().mouseover(function (event) {
clearTimeout(box_timer);
}).mouseout(function () {
box_timer = setTimeout(function () {
$('#combobox').trigger('mouseout');
}, 100);
});