Nested Dialog trigger

[nicolasthy]

Hello 👋

I'm trying to implement a <Dialog.Trigger> inside another <Dialog.Trigger> and would need some help to find a solution.
The idea is that I would like a card to open a dialog when I click on it, but I also have a "Delete" button inside this card. The issue is that when clicking on "Delete", the alert dialog is properly displayed but if I click inside the alert dialog it opens parent dialog.

I recreated a Codesandbox to illustrate the issue: https://codesandbox.io/s/elastic-danny-jwst9l?file=/src/App.tsx
Click on "Nested Trigger" -> Close the dialog, you'll see the Nested dialog and when clicking inside it the Dialog appears.

This is pretty inconvenient because this can happen a lot in my app and I believe in others too.

[joaom00]

It's because the event is bubble up to the outer Dialog.Trigger. Adding onClick={event => event.StopPropagation()} in the nested Dialog.Trigger and Dialog.Content should work

[nicolasthy]

Thanks I managed to do it just now 😅 I was missing the stopPropagation on the Dialog Content