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

[webplanex_info]

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

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

[Alan_G]

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!

[webplanex_info]

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!

[Alan_G]

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:

Re: useContextualSaveBar show function leaveConfirmationDisabled not working

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

[webplanex_info]

@Alan_G

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:

Solved: Re: useContextualSaveBar show function leaveConfirmationDisabled not working - Shopify Community

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

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,

[codeex]

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!

[Alan_G]

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

[webplanex_info]

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.

[fisico]

Hii @Alan_G I’m also experiencing the same issue on my side — would appreciate any updates or suggestions once you’ve had a chance to look into it.

[Alan_G]

Thanks @fisico - we’re still looking into this on our end, but I will update you both here in this thread once I have more to share

[Alan_G]

Hey @webplanex_info, @codeex, and @fisico - thanks again for your patience while we dug into this!

After investigating with the team, I have some clarification on how the shake animation works. The key thing is that the shake animation is automatic - it’s controlled by the Shopify Admin and triggers when users try to navigate away while the CSB is visible. At the moment, you can’t manually trigger it yourself programatically.

With leaveConfirmationDisable, when we set it to true, what we’re actually doing is disabling the navigation blocking (the modal pop-up, but not the shake animation itself)

Here’s a quick example of how this should look:

const prevIsChanged = useRef(false);

useEffect(() => {
    if (isChanged && !prevIsChanged.current) {
        // Don't use leaveConfirmationDisable: true if you want the confirmation modal blocker
        show(); // This enables navigation blocking by default
    }
    
    if (isChanged) {
        saveAction.setOptions({
            disabled: false,
            loading: isUpdateSettings,
            label: 'Save Changes',
            onAction: () => handleSubmit(),
        });
        
        discardAction.setOptions({
            disabled: isUpdateSettings,
            onAction: () => DiscardSubmitHandle(),
        });
    }
    
    prevIsChanged.current = isChanged;
}, [isChanged, isUpdateSettings]);

The shake animation should work automatically when the CSB is visible and someone clicks a navigation link or tries to leave the page, as long as you haven’t disabled it with leaveConfirmationDisable: true.

Essentially, leaveConfirmationDisable can turn on/off the modal when attempting to navigate away, but does not power the shake animation.

Let me know if this doesn’t solve it and we can dig deeper or if I’m misunderstanding things ! Happy to dig into this further.

[webplanex_info]

Hii @Alan_G [Shopify Staff]

Thank you very much for your in-depth investigation

We have applied and investigated as per your guidance but the shake is not working because when we remove ‘leaveConfirmationDisable’ the automatic modal pop-up opens, the shake does not.

You can see in the screenrecord video below link (if not open video download and check please)
https://drive.google.com/file/d/1hhNZJuJT7SQhreI7gWmUDz79tCADNNaz/view?usp=drive_link

[Alan_G]

Thanks @webplanex_info - I really appreciate you sharing the video there. I’ll keep looking into this on our end and loop back with you when I have more info

[Alan_G]

Hey @webplanex_info and all. I was able to speak with the team on this again, and just to confirm, the CSB shake animation should be automatic when a user tries to leave the page without making changes. To help us dig deeper into why the shake animation isn’t appearing, could you help me with a quick test?

Could you please set leaveConfirmationDisable: true (to disable the modal), then try navigating away with unsaved changes and record what happens? I believe that we should see the CSB shake instead of the modal appearing. We don’t allow for triggering the shake animation programatically, but it should happen automatically in that context.

If the shake still doesn’t appear, could you also share your shop domain (or DM me if you prefer), the App ID or a test version we can install, and the exact @shopify/app-bridge-react version you’re using?

This will help us reproduce the issue on our end and determine if there’s something we need to fix. Really appreciate your help troubleshooting this!

[webplanex_info]

Hi @Alan_G,

Thanks again for your continued support and follow-up.

As per your suggestion, we have tested the behavior with leaveConfirmationDisable: true. However, we are still not seeing the CSB shake animation** when navigating away with unsaved changes. Only silent navigation happens—no modal and no shake.

To help you reproduce this issue more easily, could you please install our live app on your demo store and follow these steps:

1. App Name: webPlanex : Wallet
2. Choose the Free Trial plan when installing.
3. Go to the Settings page inside the app.
4. Make any change without saving.
5. Try to navigate away or close the tab and observe.

We are currently using:
@shopify/app-bridge-react version: 3.7.9
see:- Screenshot by Lightshot

Looking forward to your feedback!

Thanks..

[Alan_G]

Thanks @webplanex_info - I was able to replicate this on my end here. I’ll keep digging into this and loop back with you once I have more info to share, I appreciate you sharing the replication steps.

[webplanex_info]

Hello @Alan_G [Shopify Staff]

** Is there any update regarding this? Looking forward to your response. Thank you!**

[webplanex_info]

HI @Alan_G[Shopify Staff] is there any update regarding shaking save bar? I just waiting for your answer.

Thanks…

[usman_ahmed]

use this
await shopify.saveBar.leaveConfirmation();