Page Slot Buttons Not Working

App Bridge
1

When using an onClick within the primary action has stopped working. This has broken navigation in my app in production where it was previously working.

When using onClick like this it’s not working when it previously was. The following is an example using alert but I’m actually using this for navigate() within my app.

<s-button
  slot="primary-action"
  variant="primary"
  onClick={() => alert('testing')}
>
  Primary button
</s-button>

However this does.

<s-button
  variant="primary"
  onClick={() => alert('testing')}
>
  Primary button
</s-button>

Did Polaris have an update that occurred because I didn’t deploy any changes with the primary action and it stopped working on its own.

1 Like
2

On further investigation, it appears that my second button doesn’t work which is a link to an admin page.

<s-button
  slot="secondary-actions"
  variant="secondary"
  href="shopify://admin/catalogs"
  target="_blank"
>
  View Catalogs
</s-button>

Thinking there is a bug in the use of slot buttons as a whole or page structure web component.

3

Hi @darcyvoutt, we also just ran into the same issue and the buttons now don’t do anything and are unresponsive.

On some devices where possibly a cached version of app bridge was still present, it works just fine and when loaded fresh / in incognito it stops working altogether.

Hopefully someone from Shopify’s able to have this checked and resolved.

4

Thanks for confirming, thought maybe it was just myself. I ended up implementing a workaround with an action button outside of the slots, but it’s not the ideal UX.

5

Same here, looking to just move it within the app. Should work for now until this gets fixed.

6

Same here: all primary and secondary actions on s-page are unresponsive…

7

Have you tried removing the ‘variant’ prop and leaving only ‘slot’? Seems to solve it

8

@Luiz_Faro No, but will do once I have a minute, thanks for the heads up.

cc: @lezlet

1 Like
9

I’ve testing what @lezlet’s suggestion and he’s right on this. Here’s a example of code what I have to articulate two changes that were needed.

Changes

  • Removing the variant property
  • Use s-link and not s-button for hyperlinks
{/* Link */}
<s-link
  slot="secondary-actions"
  href="shopify://admin/catalogs"
  target="_blank"
>
  Link action
</s-link>

{/* Button */}
<s-button
  slot="primary-action"
  onClick={() => navigate('/new')}
>
  Button action
</s-button>
1 Like
10

This works - even if on <s-link> you use onClick instead of href:

<s-page
        heading="Heading"
        inlineSize="large"
      >
      <s-button
        slot="primary-action"
        onClick={() => navigate(url)}
      >
        Button
      </s-button>
      <s-link
        slot="secondary-actions"
        onClick={() => window.open('https://google.com', '_blank')}
      >
        Link
      </s-link>

Thank you @lezlet and @darcyvoutt !

1 Like
11

Awesome to see we got this figured out.

1 Like
12

The issue seems to have originated in the latest version of the Chrome browser; in previous versions, it was working. I’ve tested in Safari and Firefox, and the buttons work flawlessly. The hack above works, but waiting for a proper solution.