JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="box">
    <select id="countries">
        <option value="1">Country</option>
        <option value="2">Country 2</option>
        <option value="3">Country 3</option>
    </select>
</div>

<a href="#">open select</a>

CSS

.box{ 
    position:relative
}

JavaScript

$('select').on('focus blur change', function (e) {
    var $this = $(this),
        pos;
    
    if (e.type === 'focus') {
        //remember position
        pos = $this.offset();
        $this
            .css("position", "absolute")
            //reset position
            .offset(pos)
            //open dropdown
            .attr("size", "10");
    } else {
        //close dropdown
        $this
            .css("position", "static")
            .attr("size", "1");
        
    }
});

$('a').on('click', function(e){
    e.preventDefault();
    $('select').trigger('focus');
});