JSFiddle - React, Tailwind, and code Playground

HTML

<input id="trigger" type="button" value="Trigger" />

<div class="control">
    <select id="menu">
        <option></option>
        <option>Option one</option>
        <option>Option two</option>
        <option>Option three</option>
        <option>Option four</option>
    </select>
</div>

CSS

div{
    position: relative;
}
select{
    position: absolute;
}

JavaScript

trigger = document.getElementById("trigger");
menu = document.getElementById("menu");

trigger.onclick = toggle;
menu.onclick = close;

function toggle() {
    if(menu.size <= 1) {
        open();
    } else {
        close();
    }
}
function open() {
    //menu.size = menu.length;
    menu.focus().mousedown();
}

function close() {
    menu.size = 1;
}