Dialog inside Menu

[fedyunin]

Hello! Here issue:

<Menubar> <MenubarMenu> <MenubarTrigger><MoreVertical /></MenubarTrigger> <MenubarContent> <CreateDialog/> </MenubarContent> </MenubarMenu> </Menubar>

CreateDialog:

export default function CreateDialog(){

return <Dialog>
    <DialogTrigger asChild>
        <MenubarItem>Create</MenubarItem>
    </DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <h1>Create</h1>
        </DialogHeader>
        <div>Dialog content<div/>
        <DialogFooter>
            <Button type="submit">Create</Button>
            <DialogClose asChild>
                <Button type="button" variant="secondary">
                    Cancel
                </Button>
            </DialogClose>
        </DialogFooter>
    </DialogContent>
</Dialog>

}

When user click at Create - dialog not appearing.

In other similar issue I see that need move dialog to root level (e.g wrap menuBar), but how to handle this if I need multiple dialogs. E.g actions for Create/Edit/Delete?

[iTsygancov]

Hi @fedyunin ,

You get this problem because after clicking on <MenuItem /> component it's getting unmounted. Because the <Dialog /> component is children of <MenuItem /> component it is unmounted too.

One of the solutions will be to move <Dialog /> up at the same level with <Menubar /> component and trigger its opening by using your own React state.

You can either have 3 dialog windows with the different purposes (Create/Edit/Delete) or you can create 1 custom component and pass to it some prop (for example, type) which will maintain the content of the dialog component.

I hope that helped =)

[itschip]

You could potentially wrap the Dialog around a Popover

[itschip]

and then create a menu within the popover

[itschip]

Sike, just set modal to false in DropdownMenu

      <AlertDialog open={showDeleteMemberDialog} onOpenChange={setShowDeleteMemberDialog}>
        <DropdownMenu modal={false}>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="data-[state=open]:bg-muted flex h-8 w-8 p-0">
              <DotsHorizontalIcon className="h-4 w-4" />
              <span className="sr-only">Open menu</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-[160px]">
            <DropdownMenuItem>Edit</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={() => setShowDeleteMemberDialog(true)}>
              Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your account and remove
              your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

[benjick]

How to handle multiple dialogs in the same menu?

[myudak]

Hi @fedyunin ,

You get this problem because after clicking on <MenuItem /> component it's getting unmounted. Because the <Dialog /> component is children of <MenuItem /> component it is unmounted too.

One of the solutions will be to move <Dialog /> up at the same level with <Menubar /> component and trigger its opening by using your own React state.

You can either have 3 dialog windows with the different purposes (Create/Edit/Delete) or you can create 1 custom component and pass to it some prop (for example, type) which will maintain the content of the dialog component.

I hope that helped =)

thank you so much man it works

[QastanFIT]

Add onSelect={(e)=>{e.preventDefault()}} on your MenubarItem. And play a bit with the z-indexes if the menu is still visible.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.