JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <select tabindex="2" id="testSelect" onfocus="openDrpDown(this)" onblur="closeDrpDown(this)" data-selectSize = "4">
    <option>11111</option>
    <option>222222</option>
    <option>444444444</option>
    <option>55555</option>
  </select>
</div>

JavaScript

function openDrpDown(elem) {
   $(elem).attr("size", $(elem).attr("data-selectSize"));
    var options = "select[tabindex='" + +$(elem).attr('tabindex') + 1 + "']";
    
    $(options).fadeTo(50, 0);
  };


function closeDrpDown(elem) {
    $(elem).attr("size", 1);
    var options = "select[tabindex='" + +$(elem).attr('tabindex') + 1 + "']";
    $(options).fadeTo('fast', 1.0);
  };