JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>
</br>
<button id="btn">Open the dialog</button>

<div id="dialog" title="Basic dialog">
    <form>
        <input type="text" id="fld" />
    </form>
</div>

CSS

.ui-menu { width: 100px; }

JavaScript

$( "#dialog" ).dialog({
	autoOpen: false,
	open: function(event, ui){
	    setTimeout(function(){$('#fld').focus();},1);
	}
});

$('#btn').click(function(e){
	$( "#dialog" ).dialog('open');
});

$('#menu li a').click(function(){
    $( "#dialog" ).dialog('open');
})

$( "#menu" ).menu();