JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toggle">toggle</div>
<div>foobar</div>
<select id="select" multiple>
	<option>foo</option>
	<option>bar</option>
</select>

JavaScript

document.getElementById('toggle').onclick = function () {
  console.log(['toggle.onclick', document.getElementById('select').ignoreClickEvent]);
  var select = document.getElementById('select');
  select.style.display = select.style.display === 'none' ? 'inline' : 'none';
  select.focus();
};
document.getElementById('toggle').onmousedown = function () {
  console.log(['toggle.onmousedown', document.getElementById('select').ignoreClickEvent]);
  document.getElementById('select').ignoreClickEvent = true;
};
document.getElementById('toggle').onmouseup = function () {
  console.log(['toggle.onmouseup', document.getElementById('select').ignoreClickEvent]);
  document.getElementById('select').ignoreClickEvent = false;
};

document.getElementById('select').onblur = function () {
  console.log(['select.onblur', this.ignoreClickEvent]);
  if (!this.ignoreClickEvent) {
    this.style.display = 'none';
  }
};