JSFiddle - React, Tailwind, and code Playground

HTML

<a>click</a>

<div class="drop user-menu" tabindex="1">user menu asd: <a href="#" tabindex="1">tab to here</a></div>



<p tabindex="1">(Note: This example uses tab index on the menu div, but I would avoid assigning a tab index if you have focusable elements in your menu.)</p>

CSS

.drop {
    display:none;
    background:blue;
}
a {
    background:black;
    color:white;
}

JavaScript

$(function () { 
    $('a').on('click', function () {
        $('.drop.user-menu').fadeIn().focus();
    });
    $('.drop.user-menu, .drop.user-menu a').on('blur', function () {
        setTimeout(function () {
            var focused = $(document.activeElement);console.log(focused);
            if (!focused.hasClass('drop') && focused.parents('.drop.user-menu').length === 0) {
                $('.drop.user-menu').fadeOut();
            }
        }, 1);
    });
});