Discard confirmation on SaveBar lacks fine control

[Zetxus]

Describe the bug

We've enabled the discardConfirmation on our SaveBars however we've seemingly hit a limitation - when the user clicks the escape button or hits outside of the max modal, you'd expect the confirmation to close the modal as well. However we could not find a way to attach a callback on that occasion.

Another problem we hit which I don't think deserves its own issue is the escape button which normally prompts a close on the modal actually instantly hides the discard confirmation modal on the first press. The second time you press the escape button, the discard confirmation modal persist on the screen and awaits for you to act on it.

To Reproduce

Steps to reproduce the behaviour:

1. Create an app from the remix template
2. Replace app._index.tsx content with the following short demo snippet

import type { LoaderFunctionArgs } from "@remix-run/node";
import { Modal, SaveBar, TitleBar } from "@shopify/app-bridge-react";
import {
  Button,
  Page
} from "@shopify/polaris";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  await authenticate.admin(request);

  return null;
};

export default function Index() {
  return (
    <Page>
      <Button onClick={() => shopify.modal.show('the-modal')}>Open Modal</Button>
      <Modal id="the-modal" variant="max">
        <SaveBar
          open
          // @ts-ignore
          discardConfirmation=""
        >
          <button variant="primary" disabled></button>
          <button loading=""></button>
        </SaveBar>
        <TitleBar
          title="Get titled"
        />
      </Modal>
    </Page>
  );
}

3.1. to reproduce the escape bug - click the escape button while the max modal is opened. You'll notice that the discard confirmation modal shows up and then hides instantly. The second press will result in the expected behavior - the modal waits for you to click either discard or continue editing.

If applicable, add screenshots to help explain your problem.

Expected behaviour

We need to be able to execute code on either Continue editing or Discard changes click. The main motivation behind this being able to hide a max modal with a save bar that has received an exit action (say escape button pressed or the user clicked the tiny little overlay that is between the max modal and the parent window).

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge @ 4+
• @shopify/app-bridge-react @ 4.1.3
• @shopify/polaris @ 12.27.0

Platform

• OS: Windows
• OS Version: Microsoft Windows 11 Pro 10.0.22631 Build 22631
• App: Chrome Version 126.0.6478.127 (Official Build) (64-bit)

Additional context

N/A

[seppestaes]

Seems to be fixed