JSFiddle - React, Tailwind, and code Playground

by Smolo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  Favorite color:
  <input type="text" id="favcolors" list="colors" placeholder="Pick a color">
  <datalist id="colors">
   <option value="Blue">
   <option value="Brown">
   <option value="Cyan">
   <option value="Green">
   <option value="Orange">
   <option value="Pink">
   <option value="Purple">
   <option value="Red">
   <option value="Yellow">
  </datalist>

JavaScript

function dlRestoreValue(i) {

    let t = $('#' + i);
    if (t.val() === '') {

        if (t.attr('org-placeholder') !== t.attr('placeholder')) {
            t.val(t.attr('placeholder'));
        }

        t.attr('placeholder', '');
        if (t.val() === '') {
            t.attr('placeholder', t.attr('org-placeholder'));
        }
      
    }

}

function dlShowAllOnArrowClick(i) {

    $('#' + i)
        .on('click', function(e) {

            let t = $(this);
            if ((t.width() - (e.clientX - t.offset().left)) < 14) {
                if (t.val() !== "") {
                    t.attr('placeholder', t.val());
                    t.val('');
                }
            } else {
                dlRestoreValue(i)
            }
        })

    .on('mouseleave', function() {
        dlRestoreValue(this.id);
    })


    .on('mouseenter', function() {
        if (!$(this).is("[org-placeholder]")) $(this).attr('org-placeholder', $(this).attr('placeholder'));
    })

}


dlShowAllOnArrowClick('favcolors');