Is it possible to use a menu item as a dialog trigger?

[tuananhlai]

Hi everyone, I was wondering, does React Aria support using a menu item as a dialog trigger? The documentation doesn't seem to mention this use case. For example...

      <MenuTrigger>
        <Button aria-label="Menu">☰</Button>
        <Popover>
          <Menu onAction={alert}>
            <DialogTrigger>
              <MenuItem id="open">Open Dialog</MenuItem>
              {(close) => <Dialog>Hello</Dialog>}
            </DialogTrigger>
            <MenuItem id="second">Item 2</MenuItem>
          </Menu>
        </Popover>
      </MenuTrigger>

Any help would be much appreciated. Thank you 🙇

[reidbarber]

This API isn't currently supported due to the types of children Menu expects, but you can always do this in a controlled way. Here is the example from the React Aria homepage where the edit and delete items open up dialogs:

react-spectrum/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

Lines 246 to 247 in ee51290

	<MenuItem id="edit"><PencilIcon aria-hidden className="w-4 h-4" /> Edit…</MenuItem>
	<MenuItem id="delete"><TrashIcon aria-hidden className="w-4 h-4" /> Delete…</MenuItem>

[devongovett]

It's also impossible because the menu would unmount the dialog trigger when it closes causing the modal to disappear immediately. Moving the dialog outside the menu is the correct approach.

[tuananhlai]

Got it! Thank you for your help.