JSFiddle - React, Tailwind, and code Playground

by SamHasler

HTML

<select id="test">
 <option>1</option>
 <option>2</option>
</select>

<select id="notest">
 <option>1</option>
 <option>2</option>
</select>

<div id="msg">Open?<div>

CSS

.dropDownOpen {
    background: #FAA;
}

JavaScript

var selected;
function out(el, why){
     console.log( 'out ', why )
};
// <select> element displays its options on mousedown, not click.
function showDropdown(element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};
function ddClose(dd, why){
   $("#msg").removeClass("dropDownOpen");
   console.log( 'ddClose', why )
   $(dd).off('keyDown.ddPloy');
}

function ddOpen(dd){
    $("#msg").addClass("dropDownOpen")
    selected = $(dd).val();
    console.log( 'ddOpen on '+ selected  )
    $("body").on('keydown', function(e){
       console.log( 'Key', e  )
        if (13 === e.keyCode){
            ddClose(el, "RET");
        }
    });
}
$( document ).ready(function(){
    $("body").on('keydown', function(e){
        if (13 === e.keyCode){
          console.log( 'TRIGGER RETURN', e  )
        }
    });


    $('#test').mousedown( function(){ 
        ddOpen(this);
    })
    .blur( function(){ 
        ddClose(this,"blur",true) 
    })
    .change( function(){ 
        out(this,'change',true ) 
    })
    .mouseleave( function(){
//        out(this,'ml' )
    })
    .mouseup( function(){ 
        if( $( this ).val() == selected ) {
            out(this,"mu val==selected")
        } else {
            console.log("mu val NOT selected ", $( this ).val() , selected)
        }
    })
})