JSFiddle - React, Tailwind, and code Playground

by aarryy

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){
	    $('#fld').focus();
	}
});

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

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

$( "#menu" ).menu({
	select: function( event, ui ) {
	    $( "#dialog" ).dialog('open');
	}
});