useContextualSaveBar show function leaveConfirmationDisabled not working

[delyanpeev]

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

[delyanpeev · 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 🙂