[DropdownMenu][Repro example] Prevent DropdownMenu.Trigger click events propagating up to document?

[Nic0S]

How do I prevent click event listeners on the document / window triggering when I click a DropdownMenu.Trigger? I've tried adding event.stopPropagation() in a few places but I have not been able to figure out how to intercept these. The situation is that I have unrelated listeners on the document that I do not want to be fired when the dropdown trigger is clicked.

Here is a minimal repro of the behavior I'm seeing: https://codesandbox.io/s/radix-demo-2eu7mn?file=/src/App.tsx:424-444

[andy-hook]

Related explanation

[Nic0S]

Hey @andy-hook I just tried setting modal to both true and false on the DropdownMenu.Root but I'm actually still seeing the same behavior on both, updated here: https://codesandbox.io/s/radix-demo-2eu7mn?file=/src/App.tsx sorry if I'm missing something here. You can see in that example that the document click listener is still triggering.

Our app puts click listeners on the document to detect clicks that weren't handled by any other component, to dismiss certain things. It's likely that this wouldn't be an issue if we fully switched to radix-ui for this type of thing, but it might be a little difficult to migrate the entire app in one step. I was hoping we could stop propagation on the radix UI components so they don't make it to the upper levels (document, window)

[andy-hook]

I just tried setting modal to both true and false on the DropdownMenu.Root but I'm actually still seeing the same behavior on both

You're not actually calling stopPropagation on the trigger in that example though.

To be honest I'm still not clear on why stopping propagation is what you need, you could for example delegate from the the document and filter based on what's being clicked instead. TBH though if this is solvable by adopting Radix in its entirety then I would strongly recommend it as layering would be completely solved for you without any of this additional complexity.

[Nic0S]

Ah yup that did it, needed to do both. Thank you!