Opening a Dialog from a MenuItem

[nielsrowinbik]

What I'm trying to achieve seems so trivial yet for some reason I cannot get it to work properly. I'm almost certain I'm missing something extremely obvious but I cannot for the life if me figure out what it is.

Essentially I am building an action menu much like the example in the documentation. It's a collection of actions the user can take that are contextual to an item in a list. Each item in the list has its own menu.

One of the possible actions is a delete action. This action previously existed as its own button, but since I'm adding more actions, I'd like to use a menu. Something like this:

// ItemEditMenu.tsx

<Menu>
  <Menu.Button>Actions</Menu.Button>
  <Menu.Items>
    <Menu.Item>
      // Another action
    </Menu.Item>
    <Menu.Item>
      <DeleteButton {...someProps} />
    </Menu.Item>
  </Menu.Items>
</Menu>

The DeleteButton components renders out the button, as well as a Dialog, asking the user whether he is sure. If he is, then the item is deleted, and if not, the Dialog is simply closed:

// DeleteButton.tsx

<>
  <button className="bg-white ui-active:bg-zinc-100">Delete</button>

  <Dialog as="div" open={isOpen}>
    <div className="fixed inset-0 z-50 bg-black/50" />
    <div className="flex min-h-full items-center justify-center">
      <Dialog.Panel className="bg-white">
        <h3>Are you sure?</h3>
        <button onClick={deleteItem}>Yes</button>
        <button onClick={closeModal}>No</button>
      </Dialog.Panel>
    </div>
  </Dialog>
</>

When I click on the Delete button, it'll show the Dialog correctly, but when I click anywhere on the Dialog, the Menu probably registers that as a click outside the Menu, and closes both the menu as well as the Dialog.

I don't mind the menu closing in the background because it's deciding that clicking on the Dialog means clicking outside the menu, but I would really like the Dialog to stay open...

Since this is pretty much the outlined use cases for both the Menu and the Dialog components but used together instead of separately I'm sure there has to be a way... Any input is much appreciated!