Summary
When using @shopify/app-bridge-react (v4.x with App Bridge CDN), opening a second <Modal> from inside a fullscreen <Modal variant="max"> causes the fullscreen modal to immediately close. Only the smaller modal remains visible. This breaks any app that needs confirmation dialogs, selection modals, or condition editors inside a fullscreen modal workflow.
Additionally, the <SaveBar> discard button’s onClick handler does not fire when the SaveBar is rendered inside a fullscreen <Modal variant="max">.
Environment
-
App Bridge: CDN , React wrappers from
@shopify/app-bridge-react -
@shopify/app-bridge-reactversion:^4.1.2 -
@shopify/polarisversion:^12.27.0 -
React version:
^18.2.0 -
Date issue started: ~Late February / Early March 2026 (previously worked)
Steps to Reproduce
-
Create a fullscreen modal using
<Modal id="main" variant="max"> -
Inside that modal, render a second
<Modal id="inner">that opens on a button click -
Click the button to open the inner modal
Minimal reproduction:
import { Modal, TitleBar } from "@shopify/app-bridge-react";
import { Button } from "@shopify/polaris";
import { useState } from "react";
function App() {
const [outerOpen, setOuterOpen] = useState(false);
const [innerOpen, setInnerOpen] = useState(false);
const shopify = useAppBridge();
return (
<>
<Button onClick={() => shopify.modal.show("outer-modal")}>
Open Fullscreen
</Button>
<Modal id="outer-modal" variant="max">
<TitleBar title="Fullscreen Modal" />
<Button onClick={() => shopify.modal.show("inner-modal")}>
Open Inner Modal
</Button>
</Modal>
<Modal id="inner-modal">
<TitleBar title="Inner Confirmation" />
<p>This is a nested modal</p>
</Modal>
</>
);
}
Expected Behavior
-
The inner modal opens on top of the fullscreen modal
-
The fullscreen modal remains open in the background
-
OR: App Bridge provides an official API for stacking/nested modals
Actual Behavior
-
The fullscreen modal closes immediately when the inner modal opens
-
Only the inner (small) modal is visible
-
After closing the inner modal, the user is back on the main page — all unsaved work in the fullscreen modal is lost
We’ve confirmed a fix and have it in the queue.