JSFiddle - React, Tailwind, and code Playground

HTML

<input id='myInput' type='text' />
<div id='myList'>x</div>

CSS

#myInput { float:left; outline: none; }
#myList { float:left; border: 1px solid #000; width:14px; height:20px; padding-left:6px; display:none; cursor:pointer; }

JavaScript

var click_in_process = false; // global

    $('#myList').mousedown(function() {
        click_in_process = true;
    });

    $('#myList').mouseup(function() {
        click_in_process = false;
        $('#myInput').focus();
        
        // a code of $('#myList') clicking event, for example:
        $('#myInput').val('');
    });
    
    $('#myInput').blur(function() {
        if(!click_in_process) {
            $('#myList').hide();
            // a code of what you want to happen after you really left  $('#myInput')

        }
    });

$('#myInput').focus(function() {
        $('#myList').show();
    });