Dialog usage with an iframe (react-frame-component)

[doougui]

Hello. I'm developing a chrome extension and trying to use the Dialog primitive inside an iframe, but even when using the Dialog.Portal conponent, the "outer" body (the one outside the iframe) is the one getting the overlay styles applied.

And the content renders inside the "outer" body too:

How do I make sure the Dialog opens inside the iframe and not in the page body?

[andy-hook]

Hi @doougui , how are you rendering to the iframe? body styles are applied relative to the scope of the document.

[andy-hook]

Dialog portal has a container prop which you can use to render the contents to a different node. I was curious about your overlay styles on body though, they should be being applied to the Overlay part and thus unaffected by this.

The pointer-events applied on body by Dialog is closed over though, I'm not sure how we'd target your iframe with the renderer you're using.

[doougui]

It turns out that the only thing being applied to body is the pointer-events: none. The height and background properties are just my own styling.

I ended up creating my own Modal, but now I am trying to use radix for my dropdown (which is a much more complex feature) but encountered the same problem :/.

The sad thing is, even when applying the container property to the body of my iframe, it seems like unfortunately the only thing that is now inside my custom container is the dropdown content, which doesn't really solve the problem for me.

Dropdown styles when opened:

Thus I can't click any of the dropdown options because of the points-events property at the body. Sure I can "remove" the points-events at the body by doing a "pointer-events: auto !important" in my css, but by doing that, the only way to close the dropdown is by clicking in one of the options of the dropdown, it doesn't "detect" the outside click anymore. That is probably related to how you guys detect the outside click.

[andy-hook]

I thought this might be the case, it seems due to the layering components being instantiated at that higher scope. I'm not familiar with this iframe rendering library but I am curious as typical iframe usage does encapsulate all of the Radix behaviour correctly. One quick workaround would be to set modal={false} on the DropdownMenu.Root.

[doougui]

Yeah, it's presenting a really weird behavior with this react-frame-component library. I think that's due to the fact that it has a different document property as pointed out here, so when you guys do anything related to the document object (like document.body.style.pointerEvents = 'none'), it gets added to the parent document and not the frameContext.document (from react-frame-component), but that's just a guess.

Anyway, by setting the modal={false} option, it kind of works, but I still do not have the close on outside click behavior. The only way way to close the dropdown is clicking the dropdown trigger or any of the options.

One thing I have tried is manually setting the body of the iframe as points-events: none when the dropdown is opened and it sort of works. I can't click any of the items inside my iframe except for the dropdown trigger (which is the expected behavior). The only remaining problem is the outside click. To be honest I'm still not 100% sure how you guys manage the "close on outside click" thing, but I assume it's by detecting the click at the the document or something like that, which unfortunately presents the same problem mentioned before (iframe has a different document, etc).

[doougui]

Yeah, it seems like this is really what is happening, because when I click outside of the iframe, the dropdown gets closed, probably because it detected the click on the document (the page document, and not the document of the iframe).