App reviews, troubleshooting, and recommendations
Hey everyone,
I've been trying to display a contextual save bar with leaveConfirmationDisabled: true via the show function returned from the useContextualSaveBar hook with @Shopify/app-bridge-react version 3.2.1.
However, it does not work as expected and I am still required to confirm that I want to be redirected to somewhere in order for this to happen.
My code is pretty much the one from the docs and looks like this:
import { useAppBridge, useContextualSaveBar } from '@shopify/app-bridge-react'; import { Redirect } from '@shopify/app-bridge/actions'; import { Button } from '@shopify/polaris'; export const SettingsPage = () => { const { show, hide } = useContextualSaveBar(); const appBridge = useAppBridge(); return ( <> <Button onClick={() => { appBridge.dispatch(Redirect.toApp({ path: '/' })); }} >Redirect </Button> <Button primary onClick={() => { show({ leaveConfirmationDisabled: true }); }} > Show ContextualSaveBar </Button> <Button onClick={hide}>Hide ContextualSaveBar</Button> </> ); };
To test, you can just click on the 'Show ContextualSaveBar' button and then on the 'Redirect' one. I expect to be redirected without being asked for confirmation, however this does not seem to be the case.
Please, let me know if I am doing anything wrong.
P.S. There is also another thing, which I find to be quite odd and that is that upon setting options on discardAction or saveAction, the contextual save bar is automatically displayed. This seems like a strange behavior to me, given that the show function has not been called.
I look forward to receiving your replies.
Regards,
Delyan
Solved! Go to the solution
This is an accepted solution.
The problem is that the type definition is wrong. If you pass the property as leaveConfirmationDisable (mind the missing trailing 'd'), it works as expected.
However, the interface for the options of the function is defined like so:
interface ContextualSaveBarHook {
show: ({ fullWidth, leaveConfirmationDisabled }?: ShowOptions) => void;
...
}
I would appreciate if we get this fixed at some point.
I hope this helps 🙂
This is an accepted solution.
The problem is that the type definition is wrong. If you pass the property as leaveConfirmationDisable (mind the missing trailing 'd'), it works as expected.
However, the interface for the options of the function is defined like so:
interface ContextualSaveBarHook {
show: ({ fullWidth, leaveConfirmationDisabled }?: ShowOptions) => void;
...
}
I would appreciate if we get this fixed at some point.
I hope this helps 🙂
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025