[BUG REPORT] App Bridge Save Bar blocks `target="_blank"` links while active

App Bridge
,
1

Problem

When the App Bridge contextual Save Bar is visible, clicking a link that opens in a new tab (target="_blank") does not work. The navigation appears to be blocked.

This happens even though the merchant is not navigating away from the embedded app. The current page is not being replaced — a new browser tab should open independently.

We’ve confirmed this behavior recently and were able to reproduce it consistently with a minimal app.

Use Case

We’re building embedded Shopify apps where merchants may have unsaved changes (Save Bar active) and still need to open external resources in a new tab.

For example:

  • Documentation / help articles

  • Third-party tools or dashboards

  • External approval or review links

  • Support or status pages

A common pattern is placing an external link inside a modal (e.g. “View documentation”) while the Save Bar is active because the merchant was editing a form field.

Today, those links are silently blocked while the Save Bar is shown.

Steps to Reproduce

  1. Open an embedded app in the Shopify admin.

  2. Make a change in a text field so the Save Bar appears.

  3. Open a modal that contains a link with target="_blank" (e.g. https://www.google.com).

  4. Click the link.

  5. Observe: nothing opens — the link is blocked.

  6. Click Save or Discard to hide the Save Bar.

  7. Click the same link again — it opens normally in a new tab.

Demo video

https://github.com/user-attachments/assets/1eba5803-51bb-4e08-a5e3-c6e05516e72a

Minimal reproduction repo

The entire repro is a single route file based on the Shopify React Router app template:

  • Save Bar shown via shopify.saveBar.show() when a text field has unsaved changes

  • s-text-field with onInput to trigger dirty state while typing

  • s-modal opened with commandFor / command="--show"

  • s-button with href and target="_blank" inside the modal

Current Behavior

  • Save Bar hidden → link with target="_blank" opens in new tab :white_check_mark:

  • Save Bar visible → link is blocked / does not open :x:

Expected Behavior

The Save Bar should only guard against navigation that would leave or replace the current embedded app page.

Opening a link in a new tab should be allowed, since:

  • The app iframe is not being replaced

  • The merchant is not losing unsaved changes in the current session

  • target="_blank" explicitly signals external / new-tab navigation

What We’ve Already Explored

:white_check_mark: Using target="_blank" on s-button with href

:white_check_mark: Placing the link inside a Polaris s-modal

:white_check_mark: Confirming the link works when the Save Bar is dismissed

:white_check_mark: Reproducing with the official React Router app template + App Bridge SaveBar component

:white_check_mark: Showing the Save Bar programmatically via shopify.saveBar.show()

The issue appears to be at the App Bridge Save Bar level, not specific to our app logic.

Suggested Fix

Ideally App Bridge would:

  • Allow target="_blank" link clicks while the Save Bar is active

  • Distinguish between in-app navigation (should prompt) vs new-tab navigation (should allow)

  • Optionally expose configuration for which link targets are exempt from leave-confirmation behavior

Environment

  • App type: Embedded Shopify app (App Home)

  • Framework: React Router 7

  • Template: shopify-app-template-react-router

  • Packages: @shopify/app-bridge-react ^4.2.4, @shopify/shopify-app-react-router ^1.1.0

  • UI: Polaris web components (s-page, s-text-field, s-modal, s-button)

  • Save Bar API:SaveBar component + shopify.saveBar.show() / hide()

Request

Is this a known limitation or a bug? Is there a recommended workaround we may have missed?

Would love to know if a fix is planned, or if there’s an official pattern for opening external links while the Save Bar is active.

Thanks!

2

Hey @Omar_Cardenas - thanks for the detailed repro here.

This does look weird for sure, since a target="_blank" link shouldn’t be replacing the current embedded app page or causing the merchant to lose unsaved changes.

One useful thing to test: could you swap the React <SaveBar> wrapper for the raw App Bridge web component and keep the same shopify.saveBar.show() / hide() calls?

<ui-save-bar id={SAVE_BAR_ID}>
  <button variant="primary" onClick={handleSave}>Save</button>
  <button onClick={handleDiscard}>Discard</button>
</ui-save-bar>

That should help narrow down whether this is specific to the React wrapper or happening in the shared App Bridge Save Bar behaviour. Hope to hear from you soon.

3

Hey @Omar - just looping back here. We identified this as an issue on our end and the fix should be deployed - can you let me know if you’re seeing any other issues on your side?

4

Hey @Alan_G, I just double checked and its working as expected, thank you very much for the quick fix!

5

No worries - glad to hear it’s working @Omar_Cardenas - I’ll mark this as solved for now, but let me know if we can help out further.