Popover above an iFrame in React

[CarlOfHoly]

Hi,

I have implemented a basic Popover as explained in the docs, but I have encountered that I cannot close the Popover when clicking outside of the box when clicking on the underlying iFrame (The black section as shown in the picture). I am using the useDismiss function and have set the modal to true for FloatingFocusManager.

Is there a nice way of solving this issue or do I have to put an event listener on the iFrame to check for clicks?

[CarlOfHoly]

Here is a code sandbox which shows what I mean: Sandbox
When opening the Popover, it does not close when clicking on the iFrame

[atomiks]

Use FloatingOverlay so clicks are detected on that layer instead of arbitrary layers behind it. Outside clicks can't be detected inside sub-documents since the event doesn't bubble up to the one useDismiss attached the listener to.

[CarlOfHoly]

Thank you for your reply! What should the FloatingOverlay wrap? The iFrame? The entire page underneath the Popover?
I've looked in the docs, but it's not clear to me how to apply it

[atomiks]

It can be a sibling of the popover (with lower z-index) or the parent of it.