Handling Shadcn Dialog Inside Dropdowns: Resolving Auto-Close Issues

When using Shadcn's DropdownMenu component in your Next.js project, you may encounter a frustrating issue: a Dialog inside the dropdown auto-closes immediately after being triggered. This behavior occurs because the dropdown and dialog share the same parent context, causing the dropdown to unmount when a menu item is clicked.

In this guide, we’ll explore several solutions to resolve this issue, ensuring that your Shadcn Dialogs work seamlessly inside DropdownMenus.

The Problem

The issue arises when triggering a <Dialog> component inside a <DropdownMenuContent>. Clicking a <DropdownMenuItem> causes the dropdown to close, which also unmounts its children—including the dialog’s content. This unmounting interrupts the dialog display, leading to an auto-close.

Here’s an example of problematic code:

<DropdownMenu>
  <DropdownMenuTrigger>
    <p>Trigger</p>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <Dialog>
      <DropdownMenuLabel>Edit Entry</DropdownMenuLabel>
      <DropdownMenuItem>Edit</DropdownMenuItem>
      <DialogTrigger>
        <DropdownMenuItem>Delete</DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>Deleting this entry cannot be undone.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button>Delete</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </DropdownMenuContent>
</DropdownMenu>

Solutions

1. Move Dialog Outside DropdownMenuContent

To prevent the dialog from being unmounted, move it outside the <DropdownMenuContent> while keeping the trigger inside the dropdown.

<Dialog>
  <DropdownMenu>
    <DropdownMenuTrigger>
      <p>Trigger</p>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Edit</DropdownMenuItem>
      <DialogTrigger>
        <DropdownMenuItem>Delete</DropdownMenuItem>
      </DialogTrigger>
    </DropdownMenuContent>
  </DropdownMenu>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>Deleting this entry cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

This solution works well for single dialogs.

2. Use State to Control Dialog Visibility

If you have multiple dialogs, you can control their visibility using state.

const [isDialogOpen, setIsDialogOpen] = useState(false);

<DropdownMenu>
  <DropdownMenuTrigger>
    <p>Trigger</p>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem onClick={() => setIsDialogOpen(true)}>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>
        Deleting this entry cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

This approach ensures independent control of each dialog.

3. Stop Event Propagation

Prevent the dropdown’s default behavior by stopping event propagation. Add onClick={(e) => e.stopPropagation()} to the dialog trigger.

<DropdownMenu>
  <DropdownMenuTrigger>
    <p>Trigger</p>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <Dialog>
      <DialogTrigger asChild>
        <DropdownMenuItem onClick={(e) => e.stopPropagation()}>Delete</DropdownMenuItem>
      </DialogTrigger>
      <DialogContent onClick={(e) => e.stopPropagation()}>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>Deleting this entry cannot be undone.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button>Delete</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </DropdownMenuContent>
</DropdownMenu>

This keeps the dropdown open while the dialog is active.

Conclusion

By implementing one of these solutions, you can resolve the issue of Shadcn Dialogs auto-closing when triggered inside DropdownMenus. Whether you move the dialog outside, use state to control visibility, or stop event propagation, each method ensures a smoother user experience.

Key Takeaways

Moving dialogs outside of dropdowns avoids unmounting issues.
Using state provides fine-grained control for multiple dialogs.
Stopping event propagation prevents default dropdown behavior.

Adopt these techniques to enhance the functionality and accessibility of your Shadcn components today!