JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input class="input" type="text">
        
    <div class="container">
        <button class="btn-inside">select</button>
        1 click somewhere here, then outside of this div
    </div>
        
</div>
    
<div>
    <input class="input" type="text">
        
    <div class="container">
        <button class="btn-inside">select</button>
        2 click somewhere here, then outside of this div
    </div>
        
</div>

CSS

body,html{
    height: 100%;
    width:100%;
}
body>div{
    padding-top: 20px;
}
.container{
    position: absolute;
    display: none;
    background-color: #ccc;
    width: 300px;
    height: 400px;
}
.submenu .container{
    display: block;
}

JavaScript

$(function(){

    var $submenu,
        contHov = 1,
        $container = $('.container').hover(function(){ contHov^=1; }); // Togflag on hover

    $(document).on('mouseup keyup', function( e ){
        if(contHov||e.which==27) $submenu.removeClass("submenu");
    });

    $(".input").on("click", function(e){
    	$submenu = $(this).closest("div").toggleClass('submenu');
    });
    
    $(".btn-inside").on("click", function(){
        alert("Clicked");
    	$submenu.removeClass("submenu");
    });

});