Modal Shopify App Bridge Event Issue

App Bridge
1

Hello, my app currently uses @shopify/app-bridge version 3.7.11 and initiate modal fullscreen via those instances from that package. However, it gets the problem with the X button on the right corner of fullscreen modal. When clicking it, it should fire event Fullscreen.Action.EXIT to my app and I can move on with the logic code after that but not. It does not trigger any event.

I use ClientApplication to subscribe event like this in my code
app.subscribe(Fullscreen.Action.EXIT, onExit);

Could you give me some advice without switching to version 4 because that version modal cannot be integrated well. I get new problems with version 4 modal such as using isolated iframe and css not working, some external packages do not work correctly.

Thank you very much

2

@Alan_G could you help me please?

3

Please do not tag Shopify staff members that have not engaged already in a topic. This is outlined in the Code of Conduct.

Please be patient.

4

Hey @brian.ta

Just confirming this looks tied to the legacy npm App Bridge fullscreen action. That package line is in maintenance mode now, so I wouldn’t recommend relying on a change to the v3 X-button/Fullscreen.Action.EXIT behavior here.

For the current supported fullscreen-style flow, I’d use an s-app-window with a src route and listen for the hide event. That should give you the close lifecycle hook you’re looking for when the merchant exits from the Shopify-controlled top bar.

I definitely get the concern around iframe/CSS/package behavior in newer App Bridge modals. For more complex flows or third-party libraries, the better path is a route-based modal/app-window rather than an HTML-content modal, and then include the CSS/JS needed by that route directly.

If you can reproduce the same missing close event with current App Bridge/CDN APIs, sharing a minimal repro would help us take a closer look. Hope this helps a bit.

5

Thank you for your support,

I tried the new Shopify modal before but when using “src” attribute and render another page inside that modal, it costs me lot of effort to update code because it requires to communicate between modal iframe and the embed app iframe, which does not happen in old modal.

6

Hey @brian.ta, thanks for trying that and no worries!

Yeah, that extra iframe-to-iframe communication is one of the tradeoffs with src modals/app windows. Since src modals/app windows load a separate route into their own iframe, they don’t directly share the parent app frame’s JavaScript context. Our supported pattern is to communicate between the modal route and parent app frame with postMessage. There’s a bit more info here:

For the closest replacement to your old Fullscreen.Action.EXIT flow, I’d keep the close lifecycle logic in the parent app frame instead of the modal route:

const appWindow = document.getElementById('my-app-window');

appWindow.addEventListener('hide', () => {
  // run your exit / cleanup / refresh logic here
});

Then use postMessage only for data or actions that need to move between the modal route and the parent app. A common pattern is to pass initial state into the route, let the modal route save/update what it needs to, and have the parent refetch or clean up when hide fires.

If your modal content is simple enough and doesn’t need third-party libraries or direct document access, an inline modal may reduce that communication work. For complex flows, though, src / s-app-window is the supported path.

If you’re seeing the current s-app-window hide event not fire when closing from the Shopify-controlled X, a minimal repro would be the best next thing to share so we can take a closer look. Happy to do that if needed for sure!