v9 - How to open a Dialog from MenuItem?

[Pistonight]

"@fluentui/react-components": "^9.21.0"

I need to show a dialog when user clicks on a menu item.

I have tried putting the <MenuItem> inside <DialogTrigger>

<Menu>
  <MenuTrigger>
    <Button>Foo</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <Dialog>
        <DialogTrigger>
          <MenuItem>Open Dialog</MenuItem>
        </DialogTrigger>
        <DialogSurface>
          <DialogBody>
            <DialogTitle>Bar</DialogTitle>
            <DialogContent>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
                      exercitationem cumque repellendus eaque est dolor eius expedita
                      nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates
                      in natus iure cumque eaque?
            </DialogContent>
            <DialogActions>
              <DialogTrigger disableButtonEnhancement>
                <Button appearance="secondary">Close</Button>
              </DialogTrigger>
              <Button appearance="primary">Do Something</Button>
            </DialogActions>
          </DialogBody>
        </DialogSurface>
      </Dialog>
      {/* other menu items not shown... */}
    </MenuList>
  </MenuPopover>
</Menu>

I have also tried puttong the <Dialog> inside <MenuItem>

<Menu>
  <MenuTrigger>
    <Button>Foo</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem>
        <Dialog>
          <DialogTrigger>
            <span>Open Dialog</span>
          </DialogTrigger>
          <DialogSurface>
            <DialogBody>
              <DialogTitle>Bar</DialogTitle>
              <DialogContent>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
                        exercitationem cumque repellendus eaque est dolor eius expedita
                        nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates
                        in natus iure cumque eaque?
              </DialogContent>
              <DialogActions>
                <DialogTrigger disableButtonEnhancement>
                  <Button appearance="secondary">Close</Button>
                </DialogTrigger>
                <Button appearance="primary">Do Something</Button>
              </DialogActions>
            </DialogBody>
          </DialogSurface>
        </Dialog>
      </MenuItem>
      {/* other menu items not shown... */}
    </MenuList>
  </MenuPopover>
</Menu>

Both solutions render the menu correctly, but nothing happens when clicking on the menu item. Perhaps a conflict when both the menu and dialog tries to set event handler?

[behowell]

I believe you can start with the "Trigger outside dialog" example from the dialog documentation, and use the MenuItem as the trigger: https://react.fluentui.dev/?path=/docs/components-dialog--default#trigger-outside-dialog. You'll need to control the dialog's open prop. And because you're not using the DialogTrigger component, you need to manually restore focus to the button that opened the menu when the dialog closes.

Here's a demo codesandbox: https://codesandbox.io/s/dialog-opened-by-menuitem-3ctlff?file=/example.tsx