JSFiddle - React, Tailwind, and code Playground

by tic84

HTML

<input type="text" class="my-input"/>
<div class="my-item">Hello</div>
<div class="my-item">Lovely</div>
<div class="my-item">World</div>

CSS

.my-item {
    display:none;
}

JavaScript

var cancelHide = false;

$('.my-input').blur(function() {
    if (!cancelHide) {
    	$('.my-item').hide();
    }
});

$('.my-input').click(function() {
    $('.my-item').show();
});

$('.my-item').mousedown(function() {
	cancelHide = true;
});

$('.my-item').mouseup(function() {
    var text = $(this).text();
    alert(text);
    cancelHide = false;
    $('.my-input').blur();
});