JSFiddle - React, Tailwind, and code Playground

HTML

<iframe src=""></iframe>
<iframe src=""></iframe>
<div id="myMenu"></div>
<input>

CSS

iframe{
    width  : 100px;
    height : 100px;
    border : 1px solid black;
}

#myMenu{
    position : absolute;
    top : 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript

$(document.body).click(function() {
  $("#myMenu").remove();
});

$(focusWindow);

$('iframe').on('mouseenter', function () {
    $(window).on('blur', iframeclicked);
}).on('mouseleave', function () {
    $(window).off('blur', iframeclicked);
    if($(document.activeElement).is('iframe'))
        focusWindow();
});

function iframeclicked(){
     $("#myMenu").remove();
}

function focusWindow(){
    console.log($(document.body).is(':focus'));
    $('<div/>').attr('tabindex',-1).appendTo('body').focus().remove();
}

//$(window).mouseenter(focusWindow);