JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> 
<body>
<style>
.combo-box {
   position: relative;
   display: inline-block;
}
/* always show arrow, not just on hover */
input::-webkit-calendar-picker-indicator {
  opacity: 100;
  display: inline-block;
}
#options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  display: none;
  background-color: #fff;
  z-index: 1;
}
#options option:hover {
  background-color: #eee;
}
#combo-input:focus + #options,
</style>
<div class="combo-box">
  <input type="text" list="options" id="combo-input"/>
  <datalist id="options" style="display: none;" >
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option-->
  </datalist>
</div>
<script>
const comboInput = document.getElementById('combo-input');
const datalist = document.getElementById('options');
comboInput.addEventListener('mousedown', function(e){
  if (datalist.style['display'] == 'block'){
    datalist.style['display'] = 'none';
  } else {
    datalist.style['display'] = 'block';
  }
});
</script>
</body> </html>