JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar-alert">
    <input type="text" class="focused-input" />
</div>
<p>When this input is focused it doesn't let hide sidebar</p>
<input type="text" class="body-input" />

CSS

.sidebar-alert {
    width:300px;
    height:400px;
    left:-295px;
    vertical-align:middle;
    position:absolute;
    background:#c10000;
}
.body-input {
    left:60%;
    top:20%;
    position:absolute;
}
}

JavaScript

$(function () {

    $('.sidebar-alert').on('click', function () {
    alert('a');
        $(this).animate({
            left: 0
        }, 200);
        event.stopPropagation();
    });
    $('.sidebar-alert').on('mouseleave ', function () {

        if ($(".focused-input").is(":focus")) {
            $('.sidebar-alert').show();
        } else {
            $('.sidebar-alert').animate({
                left: -295
            }, 200);

        }

    });
    
    $(".focused-input").on('blur', function() {
        $('.sidebar-alert').animate({
                left: -295
            }, 200);
    });
});