JSFiddle - React, Tailwind, and code Playground
HTML
<select class="shortened-select" style="position:absolute !important; width: 200px">
<!--option val="" data-descr="" style="display: none"></option-->
<option value="Open" val="Open" data-descr="some description" selected>Open</option>
<option value="Closed" val="Closed" data-descr="a bunch of text" >Closed</option>
</select>
<select class="long-select" style="background-color:white; position: absolute !important; width: 200px; z-index: 10; pointer-events: none" onmousedown="(function(event){processOpen(event);})(event, this)" onfoucusout="$('.shortened-select').focus()">
<option id="opt">Open</option>
</select>
JavaScript
mouseupcount = 0;
$('.shortened-select').on("mouseup", function(e) {
if (mouseupcount == 0)
mouseupcount++;
else
return mouseup();
});
$(document).ready(function() {
$('.long-select').click(function(e) {
var element = document.querySelector('.shortened-select');
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mouseup', true, true, window);
element.dispatchEvent(event);
/* can be added for i.e. compatiblity.
optionsSelect.focus();
var WshShell = new ActiveXObject("WScript.Shell");
WshShell.SendKeys("%{DOWN}");
*/
});
});
function activatePointerEvents(){
$(".long-select").css("{background-color:white; position: absolute !important; width: 200px; z-index: 10; pointer-events: auto !imporant}");
}
function processOpen(e) {
e.preventDefault();
$input = $("select.shortened-select");
var $this = $(this);
$('.shortened-select').trigger('click');
}
function mouseup() {
$(".short-select").css("{background-color:white; position: absolute !important; width: 200px; z-index: 10; pointer-events: initial}");
opt = document.querySelectorAll(".shortened-select option")[document.querySelector(".shortened-select").selectedIndex];
$("#opt").html(opt.getAttribute("val") + " - " + opt.getAttribute("data-descr"));
return true;
}