[DismissableLayer] Elements rendered in popup windows are not handled correctly

[mihaip]

Bug report

Dropdown menus rendered in popup windows (i.e. separate windows created via window.open) are not dismissed correctly when clicking outside of them. This appears to be due to DismissableLayer always adding event listeners to the document global, instead of using node.ownerDocument.

Current Behavior

Clicking outside of a menu in a popup window does nothing:

Expected behavior

Clicking outside of a menu in the main window dismisses it, the same should happen in popups:

Reproducible example

https://codesandbox.io/s/agitated-stitch-txdns4 is a simple test case. The "…" button opens a menu. It works as expected in the main window, but when we render the component in a popup window (opened by the "Open Popup" button) dismissal does not work.

Suggested solution

Event handlers such as the ones from https://github.com/radix-ui/primitives/blob/6c398d9810fc52577780b5d987d2a6f11e86276b/packages/react/dismissable-layer/src/DismissableLayer.tsx#L233-L238 should be added on node.ownerDocument rather than document. Possibly a helper ref like ownerDocumentRef from https://github.com/radix-ui/primitives/blob/fbfa1e8072df7b12bcdfdf30ecc2fbead2022303/packages/react/announce/src/Announce.tsx#L99-L107 may be useful.

Additional context

I work on a multi-window application that renders components in popup windows (to allow window management). All of the logic runs in the main window for performance reasons (so that we don't need to load a copy of the application's code in each window).

Your environment

The environment is not really relevant since this occurs everywhere

Software	Name(s)	Version
Radix Package(s)	DropdownMenu, DismissableLayer	1.0.0
React	n/a	18.2.0
Browser	Chrome	105.0.5195.102
Operating System	macOS	12.6

[benoitgrelard]

Hey @mihaip,

Thanks for reporting this, that seems entirely valid 👍