How to properly handle event propagation between nested Dialog components?

[kevinwolfcr]

The Problem

I'm facing a challenging situation with event propagation when using nested Dialog components and I'd appreciate any insights from the community.

I have a component structure where I'm using a Dialog (let's call it "ParentDialog") that contains a trigger button which opens another Dialog (let's call it "ChildDialog"). The issue I'm experiencing is that when I open the ChildDialog and then click anywhere within its content, those clicks are somehow also triggering the ParentDialog actions.

Here's a simplified version of my component structure:

<Dialog>
  <DialogTrigger asChild>
    <Card className="group">
      <CardContent>
        {/* Card content */}
        <div className="opacity-0 group-hover:opacity-100">
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button 
                variant="ghost" 
                onClick={(e) => e.stopPropagation()}
              >
                <Icon name="times" />
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              {/* Dialog content */}
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <Button variant="destructive">Delete</Button>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </CardContent>
    </Card>
  </DialogTrigger>
  <DialogContent>
    {/* Parent dialog content */}
  </DialogContent>
</Dialog>

Initially, I wasn't using e.stopPropagation() on the AlertDialogTrigger button, which caused both dialogs to open simultaneously when clicking the button. Adding e.stopPropagation() fixed that immediate issue - now the button click only opens the AlertDialog.

However, once the AlertDialog is open, clicking anywhere inside it (buttons, text, etc.) also triggers the parent Dialog to open. It's as if events within the portal-rendered AlertDialog are still propagating to the parent component.

What I've tried

I've tried adding stopPropagation() to various elements within the AlertDialog, but this doesn't seem to solve the issue with clicks inside the dialog content.

The only solution I've found is to completely restructure my components to place the AlertDialog outside the DOM hierarchy of the parent Dialog's trigger:

<div className="relative">
  <Dialog>
    <DialogTrigger asChild>
      <Card className="peer">
        {/* Card content */}
      </Card>
    </DialogTrigger>
    <DialogContent>
      {/* Dialog content */}
    </DialogContent>
  </Dialog>
  <div className="absolute top-4 right-4 opacity-0 peer-hover:opacity-100">
    <AlertDialog>
      {/* Alert dialog content */}
    </AlertDialog>
  </div>
</div>

While this works, it feels like a workaround rather than the proper way to handle this situation.

Questions

1. Is this the expected behavior when nesting Dialog components, or am I missing something?
2. Is there a cleaner solution for handling event propagation between nested dialog components?
3. Is there something specific about how portal-rendered components handle events that I should be aware of?

I'd really appreciate any guidance from those who have experience with this kind of component interaction. Thanks in advance!