JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popup">
 <div class="label"> Search </div>
  <div class="control"> 
      <select name="searchval">
         <option value="entries">Entries</option> 
         <option value="bookings1">bookings1</option>
         <option value="bookings2">bookings2</option>
         <option value="bookings3">bookings3</option>
         <option value="bookings4">bookings4</option>
         <option value="bookings5">bookings5</option>
         <option value="bookings6">bookings6</option>
      </select>
   </div>
</div>

CSS

#popup { border: 2px solid black; height: 100px;}

JavaScript

$("#popup").hover(function() {
    //do none
}, function() {
    var $sel = $('select');
    if ($sel.is(":focus")) {
        console.log('do not hide');
        $sel.blur();
    } else {
        $(this).hide();
    }
});