App reviews, troubleshooting, and recommendations
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
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 these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022