JSFiddle - React, Tailwind, and code Playground

by jpussacq

HTML

<input list="values" value="apple">
<datalist id="values">
  <option value="orange">
    <option value="banana">
</datalist>
<input text="values" value="other field">

JavaScript

// Global variable to store current value
var oldValue = '';
// Blank value when click to activate all options
$('input').on('click', function() {
  oldValue = $(this).val();
  $(this).val('');
});
// Restore current value after click
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val(oldValue);
  }
});