oxxn
commented
6 months ago Seconding this. Many UI components inside this modal iframe are broken. For example, I can't get a button to work inside it. (I might be doing something else wrong, but it seems to be the same issue).
You can reproduce this with a Remix route:
import { Button } from "@shopify/polaris";
import { useEffect } from "react";
export default function Modal() {
function handleOnClick(e) {
console.log("received click event"); // does not log
}
useEffect(() => {
document.getElementById("test-modal").show();
}, []);
return (
<ui-modal id="test-modal" variant="max">
<Button onClick={handleOnClick}>A Button</Button>
</ui-modal>
);
}
henrytao-me
michaelhaessig
vincaslt
nullndr
irahulranjan
jzazove
darrynten
forsbergplustwo
Zetxus
rockposdev
gmays
danyn
TemurbekRuziyev
Describe the bug
We are in the process of migrating from app bridge 3.x to 4.x since now the Full-screen mode seems to be supported.
Issue: we are now seeing that the Modal variant="max" is creating a completely new iframe, which seems to contain a copy of the previous page with the Modal element.
Apps that have other UI elements, for example a custom dropdown component, will still have the reference to the original body, which then causes the dropdown contents to be added to the original document body and not the copied one inside the modal. (Very common that dropdowns add the contents to the body). This copy behavior breaks a lot of UI components.
Is there any way to prevent the creation of a second iframe? The previous 3x version Full-screen mode also did not create a new iframe and everything is working fine.
To Reproduce
Original embeded app:
Second Iframe for modal:
Expected behaviour
The current page is kept and the modal is opened with the contents provided. App bridge v3 Fullscreen mode works without any issues.
Contextual information
Packages and versions
App bridge v4