Summary

While the SaveBar is active (some modifications are not saved) a click on the ResourceItem component with the url property set, correctly check for the savebar status (the savebar vibrates) but does not prevent the redirection.
The exact same problem appears with backAction of a Page components

Expected behavior

When the savebar is active, the redirection is abort.

Actual behavior

When the savebar is active, the redirection is not abort.

Steps to reproduce

1. Set the url property of a @shopify/polaris ResourceItem

<ResourceItem id={product.id} url='my/url'>
	<Text variant="bodyMd" as="span">{ product.title }</Text>
</ResourceItem>

1bis. Set the backAction property of a @shopify/polaris Page

<Page backAction={{content: 'My content', url: 'my/url'}} >
</Page>

2. Call the method below to activate the savebar

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

3. Click on the ResourceItem.

4. The Savebar will move but the redirection not aborted

ByPass

In ordre to bypass this issue, use onClick instead of url property as follow

<ResourceItem id={product.id} onClick={async () => {
	await shopify.saveBar.leaveConfirmation();
	navigate('my/url');
  }}>
	<Text variant="bodyMd" as="span">{ product.title }</Text>
</ResourceItem>

Or for the page component, use the onAction

<Page
        backAction={{content: 'My content', onAction: async () => {
            await shopify.saveBar.leaveConfirmation();
            navigate('my/url');
        }}}
    >
</Page>

navigate comes from the hook useNavigate of the package @remix-run/react

Environement

Node: 20.17.0
npm: 10.8.2
npmPackages:
@shopify/polaris: ^13.9.5 => 13.9.5
react: ^18.2.31 => 18.2.31

Are you using React components?

Yes

Polaris version number

13.9.5

Browser

Chrome, Firefox

Device

Laptop