How to block navigation and trigger shake animation using Contextual Save Bar in @shopify/app-bridge-react?

App Bridge
1

Hi everyone,

I’m building a Shopify embedded app using @shopify/app-bridge-react and I’m implementing the Contextual Save Bar (CSB) to handle unsaved changes in a form.

Here’s what I’m trying to achieve:

  1. When there are unsaved changes (isChanged is true), the CSB should appear.
  2. Merchants must click “Save” or “Discard” before navigating away — this includes:
  • In-app navigation (via links or buttons)
  • Browser back button
  1. If a user tries to navigate away without acting on the CSB, the default Shopify “shake” animation should trigger on the Save Bar to draw their attention.
  2. I want to follow Shopify UX guidelines and not use a modal — this behavior should be handled via the CSB.
import { useContextualSaveBar } from '@shopify/app-bridge-react';

const { show, hide, saveAction, discardAction } = useContextualSaveBar();

useEffect(() => {
  if (isChanged) {
    show({ leaveConfirmationDisabled: true });

    saveAction.setOptions({
      disabled: false,
      loading: isUpdateSettings,
      label: 'Save Changes',
      onAction: () => handleSubmit(),
    });

    discardAction.setOptions({
      disabled: isUpdateSettings,
      onAction: () => handleDiscard(),
    });
  } else {
    hide({ leaveConfirmationDisabled: true });
  }
}, [isChanged, isUpdateSettings]);

My Questions:

  • How can I prevent any navigation when CSB is visible and unsaved changes exist?
  • How do I trigger the default “shake” animation on the CSB when a user attempts to leave without saving or discarding?
  • Is there a best-practice way to handle this in App Bridge React without manually attaching beforeunload or navigation intercepts?

I want to ensure the app behaves consistently with Shopify’s UI/UX expectations.

Thanks in advance for any help or code examples!

shake-effect

2

Hey @webplanex_info - happy to clarify some things.

Just to clarify, navigation should blocked automatically and the shake animation is automatic as well. When users try to navigate away (click links, back button, etc.) while the CSB is visible, Shopify should shake the save bar to draw attention (this is mentioned here).

Using leaveConfirmationDisable: true would prevent the modal dialog but should maintain the navigation blocking and shake behaviour as well.

In your other post there you mentioned you received a list of issues for your app in terms of improvements - could you let me know what those were? Happy to take a look to see if we can look into this - hope this helps a bit! :slight_smile:

3

Thanks for the clarification.

As mentioned earlier, we’ve implemented the logic based on Shopify’s documentation, and I’ve already shared our code above. However, we’re experiencing unstable behavior:

  • Sometimes, the native “Leave page?” modal shows.
  • Other times, it just redirects without any confirmation.
  • The shake animation for the contextual save bar (CSB) doesn’t trigger consistently — or at all.

Also, just to note — we’re using React, not plain JavaScript.

Could you please take a look at the code we’ve provided and let us know if there’s anything we might be missing? We’d really appreciate your help.

Thanks again!

4

Hey @webplanex_info thanks for confirming. Taking a quick look here at the code, the only things I can see that potentially are causing the unexpected behaviour are the flag spelling for leaveConfirmationDisable (no “d”). It is a little confusing for sure, but there’s more info on this here:

A few quick other things you can check to see if it resolves the issue:

  • Call show() once when isChanged flips true, then only tweak saveAction/discardAction. I think re-showing every render may be resetting the guard (in your useEffect function).

I think resolving those issues would then let the nav-block + shake animation be more consistent.

If it still misbehaves, ping me with your exact @shopify/app-bridge* versions and I’m happy to dig into this more deeply for sure :slight_smile:

5

Hi Alan_G [Shopify Staff],

First, thank you for your help earlier regarding the flag spelling. We removed the “d” from the flag (leaveConfirmationDisable) as you recommended, and this successfully fixed the issue with the leave model disappearing.

However, we’re still encountering an issue with the shake animation not working as expected. According to the Shopify documentation, we’ve implemented the provider setup as shown, but the shake effect isn’t triggered when we have unsaved changes and attempt to navigate away to another page. The animation doesn’t seem to work when we click on a link to navigate to another page, even though the changes haven’t been saved.

<Provider config={appBridgeConfig} router={routerConfig}>
  {children}
</Provider>

Here’s how our app is currently structured:

const prevIsChanged = useRef(false);
 
useEffect(() => {
    if (isChanged && !prevIsChanged.current) {
        show({ leaveConfirmationDisable: true }); // call only once when flipping to true
    }
 
    if (isChanged) {
        saveAction.setOptions({
            disabled: false,
            loading: isUpdateSettings,
            label: 'Save Changes',
            onAction: () => handleSubmit(),
        });
 
        discardAction.setOptions({
            disabled: isUpdateSettings,
            onAction: () => DiscardSubmitHandle(),
        });
    }
 
    prevIsChanged.current = isChanged;
}, [isChanged, isUpdateSettings]);

Also, we are using the following version of

@shopify/app-bridge-react:
"node_modules/@shopify/app-bridge-react": {"version": "3.7.10","resolved": "https://registry.npmjs.org/@shopify/app-bridge-react/-/app-bridge-react-3.7.10.tgz" }

Could you advise what might be causing the shake animation to not work when we have unsaved changes and navigate away from the page? We’ve followed the documented setup, but the effect still isn’t triggered.

Thanks again for your assistance, especially with fixing the “d” issue. Looking forward to your help on this!
Best regards,

6

Hi everyone,

I’m experiencing the same issue. I’m also using @shopify/app-bridge-react and the useContextualSaveBar hook, but I haven’t been able to get the expected behavior either.

Specifically:

  • The Contextual Save Bar appears correctly when there are unsaved changes, but it doesn’t block navigation (either through in-app links or the browser back button).
  • I can’t find a way to trigger the default “shake” animation when the user tries to leave without saving or discarding.

I’d really like to follow Shopify’s UX guidelines without relying on custom modals or manual beforeunload handlers.

If anyone has successfully implemented this behavior or has insights on how to enforce this with App Bridge React, I’d really appreciate your input!

Thanks!

7

Thanks @webplanex_info for clarifying - that is definitely odd that it’s still not working as expected, I’ll do some digging into this internally on my end for you and @codeex to see if this is unexpected behaviour and loop back with you both in this thread once I have more info

1 Like
9

Thank you for the update, @Alan_G! We appreciate you looking into this internally. We’ll be happy to wait for your findings and will be ready to assist further if needed. Please keep us in the loop, and we look forward to your response.