Closing a Dialog via the icon-button propagates the click event to parent elements

[rjray]

Bug report

Current Behavior

The close button/icon will propagate the click event up the tree of elements, triggering any other onClick handlers along the way.

Expected behavior

I would expect that either the propagation is stopped at the button, or that there is a means of preventing the propagation.

Suggested solution

Either prevent the propagation entirely in the onClick, or expose something that controls whether the event propagates.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	1.0.3
React	n/a	18.2.0
Browser	Firefox	134
Assistive tech
Node	n/a
npm/yarn
Operating System	Ubuntu	24.04

[sookmax]

This happens with DialogContent.onInteractOutside() as well.

In my case, I have a table cell containing <DialogTrigger /> and the table row containing that cell also has its own onClick() handler.

If I make my <DialogTrigger /> in the cell to stop propagate the click event, only the dialog opens without triggering the click handler on the table row, which is a desired behavior. However, when I close the dialog via onInteractOutside(), the click event that's supposed to be stopped suddenly propagates upwards, triggering the row click handler, just like what @rjray reported.

I've found a workaround by encapsulating the whole dialog tree inside a wrapper (say a <div>) and add onclick handler on that div that doesn't do anything but calling e.stopPropagation(). So for example:

<div onClick={(e) => e.stopPropagation()}>
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Portal>
      <Dialog.Overlay />
      <Dialog.Content>
          <Dialog.Title />
          <Dialog.Description />
          <Dialog.Close />
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
</div>

This helped me solve my issue, but not sure it's also useful for other cases. I'll just leave it here just in case.