-
Notifications
You must be signed in to change notification settings - Fork 8
Description
Describe the bug
We have a single page app that uses app.subscribe(Redirect.Action.APP) to track changes in navigation so we can update our application state.
We noticed in our code if we call history.dispatch(History.Action.PUSH) from a SaveBar callback while a SaveBar is currently active, it gets "blocked" and the SaveBar wiggles. That part is expected (although might be nice to document!).
After dismissing the SaveBar via shopify.saveBar.hide(), if the user attempts to use the navigation the URL bar updates but we no longer recieve Redirect.Action.APP events.
The user has to first navigate to the same navigation item that matches the history.dispatch(History.Action.PUSH) before we start getting events again.
To Reproduce
Steps to reproduce the behaviour:
- Set up a few navigation links and a
app.subscribe(Redirect.Action.APP)subscription and add some logging - Set up a SaveBar that is
openand with aonClickfor the Save/Discard button - Inside that callback handler:
shopify.saveBar.hide("foo");
history.dispatch(History.Action.PUSH, "/bar");
// Either order doesn't matter (which is surprising ... I'd assume the former would get executed serially and not trigger the bug!)
history.dispatch(History.Action.PUSH, "/bar");
shopify.saveBar.hide("foo");- Try to navigate to any item OTHER than
"/bar" - Navigate to
"/bar"and notice that if you navigate it works again
I added some setTimeout in my demo below to show that the sequence of clicking Save/Discard, then History.Action.PUSH, followed by shopify.saveBar.hide() triggers the bug:
const saveDiscardClicked = useCallback(() => {
setTimeout(() => {
history.dispatch(History.Action.PUSH, "/bar");
}, 1000);
setTimeout(() => {
shopify.saveBar.hide("foo");
}, 3000);
});Watch the console for Redirect.Action.APP log statements stopping.
Screen.Recording.2025-09-18.at.14.59.23.mov
Expected behaviour
Navigation subscriptions continue to function after hiding the save bar.
Contextual information
Packages and versions
List the relevant packages you’re using, and their versions. For example:
@shopify/app-bridge-core@1.0.1
@shopify/app-bridge-react@4.2.1
@shopify/app-bridge-types@0.2.0
@shopify/app-bridge@3.7.4
@shopify/polaris@12.10.0
Platform
Google Chrome | 139.0.7258.139 (Official Build) (arm64)
macOS Version 15.6.1 (Build 24G90)