JSFiddle - React, Tailwind, and code Playground

HTML

<select id="select_element" class="select">
  <option value=11>eleven</option>
  <option value=22>twenty two</option>
  <option value=33>thirty three</option>
  <option value=44>fourty four</option>
  <option value=55>fifty five</option>
  <option value=66>sixty six</option>
  <option value=77>seventy seven</option>
  <option value=88>eighty eight</option>
  <option value=99>ninety nine</option>
  <option value=111>hundred and eleven</option>
  <option value=122>hundred and twenty two</option>
</select>

<button id="trigger" class="trigger">open trigger</button>

<br>

<div id="result" class="result"></div>

CSS

.select {
  position: absolute;
}

/* For testing */

.trigger {
  margin-left: 168px
}

.result {
  padding: 10px
}

JavaScript

var SelectionWrapper = function(element, maxSize, selectCb) {

  var preventDefault = function(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  var isOpen = false;

  var open = function() {
    if (!isOpen) {
      element.size = maxSize;
      // Remove prevent default so that user will be able to select the option
      // Check why we prevent it in the first place below
      element.removeEventListener('mousedown', preventDefault);
			// We focus so that we can close on blur.
      element.focus();
      isOpen = true;
    }
  };

  var close = function() {
    if (isOpen) {
      element.size = 1;
      // Prevent default so that the default select box open behaviour is muted.
      element.addEventListener('mousedown', preventDefault);
      isOpen = false;
    }
  };

	// For the reason above
  element.addEventListener('mousedown', preventDefault);

	// So that clicking elsewhere closes the box
  element.addEventListener('blur', close);

	// Toggle when click
  element.addEventListener('click', function(e) {
    if (isOpen) {
      close();
      // Call ballback if present
      if(selectCb) {
				selectCb(element.value);
			}
    } else {
      open();
    }
  });


  return {
    open: open,
	  close: close
  };
};

// Usage
var selectionWrapper = SelectionWrapper(document.getElementById("select_element"), 7, function(value) {
  var para = document.createElement("DIV");
  para.textContent = "Selected option: " + value;
  document.getElementById("result").appendChild(para);
});

document.getElementById("trigger").addEventListener('click', function() {
  selectionWrapper.open();
});