Save bar does not stop s-page breadcrumb navigation

Polaris
1

I have a form with data-save-bar active on a page that also has s-page with navigation breadcrumbs. When changes are made and the save bar is showing, clicking on a breadcrumb results in successful navigation and simultaneously the save bar shakes and remains on the new page – where it has no effect and can no longer be dismissed.

It seems like the save bar should be intercepting the breadcrumb navigation, but it isn’t. Likely this is because the interaction between web components and app bridge isn’t quite right.

Save bar does not preempt navigation via s-page breadcrumbs
Save bar does not preempt navigation via s-page breadcrumbs
2

@Alan_G is this the right forum for this? Interaction between Polaris and App Bridge…

3

@_Ryan I am not able to reproduce. Here’s a reduced test case HTML file:

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Forms Test</title>
    <meta name="shopify-api-key" content="{{YOUR_SHOPIFY_API_KEY_HERE}}" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
  </head>

  <body>
    <s-page heading="Forms Test">
      <s-link slot="breadcrumb-actions" href="/">Home</s-link>

      <form id="form" data-save-bar>
        <s-text-field
          label="First name"
          name="first"
          value="John"
        ></s-text-field>
      </form>
    </s-page>
  </body>
</html>

We’ve made some recent updates to app frame & components. It would be helpful to see what components you’re using; would you mind sharing a reduced test case of your code?

4

@Kyle-Shopify thanks for replying to this. I’m using your react router template embedded in the admin. To replicate the issue, start with a clean react router template and paste the following in the “additional page” app.additional.tsx:

export default function AdditionalPage() {
  return (
    <s-page heading="Additional">
      <s-link href="/app" slot="breadcrumb-actions">
        Main Page
      </s-link>
      <s-section>
        <form id="form" data-save-bar>
          <s-text-field
            label="First name"
            name="first"
            value="John"
          ></s-text-field>
        </form>
      </s-section>
      <s-section>
        <s-paragraph>
          <s-link href="/app">Link to main page</s-link>
        </s-paragraph>
      </s-section>
    </s-page>
  );
}

Load up the app, navigate to the “additional page” and change the name in the form. The save bar appears. Then click on either the breadcrumb or the normal s-link below. You’ll see the save bar shake but you’ll navigate back to the main page.

I think it’s really important to test these components in embedded apps. I’ve noticed a pattern of testing in isolated HTML files/sharing CodePen or whatever – but that doesn’t capture some important effects.

5

I’m not surprised the standalone-HTML version doesn’t show the same issue I see, as the save bar probably works quite differently embedded vs standalone. When embedded, the save bar has to be rendered by the parent Shopify page (so, the other end of the app bridge, if you will, because the save bar extends outside the app frame, and may even interact with parent page nav), whereas with a page that isn’t embedded the app bridge only has to produce the save bar locally, in the same frame as the app form and links. Hope that makes sense.

6

@_Ryan thank you for sharing the context that you are seeing this in. I am able to reproduce given the approach & code that you shared. It’s good to know that it’s not just the breadcrumb link, but also the regular <s-link> in the page that leads to this issue.

In my previous post, I accidentally omitted the detail that the code snippet I shared was used in an embedded app context. We do a lot of our testing in a somewhat more vanilla HTML+JS test app to ensure we have the fundamentals right. So the key difference here seems to be React Router, and that it is handling the links differently.

We’ll investigate what’s going on here.

7

@Kyle-Shopify that makes sense, thanks for clearing that up. Glad you’ve got a lead on react-router being the key.

8

Hey @_Ryan

Just an update here - we’re working on a fix for this but it may take a bit longer to fully ship. I’ll post another update when there’s more to share.

1 Like
11

@_Ryan, as a workaround I’m using the savebar component (ui-save-bar) instead of the data-save-bar attribute on my form.

sadly it still doesn’t prevent navigation via breadcrumbs by default, but it’s possible to control show/hide and throw a leaveConfirmation to make it shake.

<s-link
  slot="breadcrumb-actions"
  href="/app/page"
  onClick={(e) => {
    if (isDirty) {
      e.preventDefault();
      shopify.saveBar.leaveConfirmation();
    }
  }}
>
  {t("page.form.breadcrumb")}
</s-link>

e.preventDefault() on the breadcrumb will prevent the navigation when the form is dirty and shopify.saveBar.leaveConfirmation() focus and shake the savebar for user feedback.

anyway you can also use a blocker to prevent the navigation via breadcrumbs, but for me this solution was too much.

P.S. my last comment was sent by accident when I was still writing.

1 Like