JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text"></input>
<div>
<p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p>
</div>

CSS

div {
    max-height: 150px;
    width: 150px;
    overflow: scroll;
}

JavaScript

$('input').blur(function(){
    if ($('div:hover').length === 0)
    {
        $('div').hide();   
    }
});

$('input').focus(function(){
 $('div').show();   
});

$('div').mousedown(function(e){
    e.preventDefault();
});

$('div').hide();

$('div').focus(function(e){
    $('input').focus();
});