App Bridge Modal: Opening a second Modal inside a fullscreen variant="max" Modal causes the fullscreen Modal to close (v4.x / React)

Technical Q&A
,

Topic summary

Issue: In @shopify/app-bridge-react v4.1.2 (using App Bridge via CDN), opening a second from inside a fullscreen closes the fullscreen modal. Only the inner modal remains visible. Reported to have started in late Feb/early Mar 2026; previously worked.

Environment: @shopify/app-bridge-react ^4.1.2, App Bridge CDN, @shopify/polaris ^12.27.0, React ^18.2.0.

Impact: Fullscreen workflows (e.g., confirmation dialogs, selection modals, condition editors) break. After closing the inner modal, the app returns to the main page and unsaved work in the fullscreen modal is lost.

Additional bug: The Polaris discard button’s onClick handler does not fire when the SaveBar is rendered inside a fullscreen variant=“max” modal.

Reproduction: Open a fullscreen modal (id “outer-modal”); from within it, trigger a second modal (id “inner-modal”). When the inner opens, the fullscreen closes. A minimal code snippet is provided and central to understanding.

Expected vs. actual: Expected stacked modals or an official API for nested modals; actual behavior closes the fullscreen modal.

Status: No workaround or resolution provided; issue remains open.

Summarized with AI on March 3. AI used: gpt-5.
1

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-react version: ^4.1.2

  • @shopify/polaris version: ^12.27.0

  • React version: ^18.2.0

  • Date issue started: ~Late February / Early March 2026 (previously worked)

Steps to Reproduce

  1. Create a fullscreen modal using <Modal id="main" variant="max">

  2. Inside that modal, render a second <Modal id="inner"> that opens on a button click

  3. 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

1 Like