JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <div class="i_select">
     <input type="text">
    <div class="remember">
      <ul>
        <li>Teste, testando, testado...</li>
      </ul>
    </div>
  </div>
</form>

CSS

input[type='text']{
  width:200px;
}
.i_select{
  width:200px;
  position:relative;
}
.remember{
  background:#eee;
  width:210px;
  position:absolute;
  top:20;
}
.remember ul{
 display:none 
}
.remember ul li{
  list-style-type:none;
}

JavaScript

$(document).ready(function(){
  $(':input').on('keyup',function(e){
    //Quando entrar com 3 caracteres ou mais exibe uma tela com sugestoes (vindas do banco)	
   if($(this).val().length > 3){
      $(this).parent().find('ul').show();
    }
    else{
      //Se for menos esconde
      $(this).parent().find('ul').hide();
    }
    //Se clicar em esc esconde a sugestao
    if (e.keyCode === 27){
       $(this).parent().find('ul').hide();
    } 
  });
  //Para escolher uma sugestao tem que clicar, pega o valor clicado e coloca no campo
  $('li').on('click',function(){
      $(this).parent().parent().parent().find(':input').val('Teste, testando, testado');
      $(this).parent().hide();
  });
  //Aqui mora o problema, quero que quando o campo seja desfocado a tela de sugestao desapareça
  //Porém quando é na hora de executar o clique pra selecionar uma opção o 'focusout' é executado primeiro que o 'click'. Assim a tela de sugestão some antes que o clique seja de fato executado.
  $(':input').on('focusout',function(){
    $(this).parent().find('ul').hide();
  });
});