Page backAction does not prevent navigation when SaveBar is showing

[gavinharriss]

Summary

The backAction is not working correctly with SaveBar. When the back button is used, the SaveBar shakes but does not prevent the navigation occurring.

Expected behavior

When the backAction button is used and the SaveBar is visible, the SaveBar should shake but navigation should be prevented.

Actual behavior

When the backAction button is used and the SaveBar is visible, the SaveBar shakes but navigation away from the page still happens.

Steps to reproduce

1. Create a page with backAction and SaveBar component:

import { Page } from "@shopify/polaris";
import { SaveBar } from "@shopify/app-bridge-react";

 <Page 
    title="Add connection"
    backAction={{
      content: "Connections",
      url: "/app/connections",
    }}
  >
    <SaveBar id="my-save-bar">
      <button variant="primary" onClick={handleSave}></button>
      <button onClick={handleDiscard}></button>
    </SaveBar>
    ...
</Page>

shopify.saveBar.show('my-save-bar');

2. Use backAction to navigate away from the page.

Are you using React components?

Yes

Polaris version number

13.9.0

Browser

Chrome

Device

Windows 11 Pro

[gavinharriss]

This is a duplicate of Shopify/shopify-app-bridge#416