<s-modal> action buttons (slot="primary-action") don't fire onClick on Shopify mobile app

Polaris
1

Hi Shopify team,

Wanted to share a bug we ran into with s-modal (Polaris web components).

The issue
We were using the recommended action buttons API on s-modal :

<s-modal id="my-modal" heading="My Modal">
  <s-button slot="primary-action" variant="primary" onClick={handleConfirm}>
    Confirm
  </s-button>
  <s-button slot="secondary-actions" commandFor="my-modal" command="--hide">
    Cancel
  </s-button>
</s-modal>

This works perfectly in the browser on desktop. However, on the Shopify mobile app (iOS/Android), the onClick handler on the primary action button never fires.

The fix

We moved the buttons out of slots and into the modal’s main content area. This works on both desktop and Shopify mobile app.

Has anyone else run into this? Is there a better workaround, or is this a known issue with a fix coming?

19 Likes
2

Yes I just tested and I have the same issue

image
image1626×1428 275 KB

1 Like
3

Hey folks - digging into this now, this does look like an issue on our side.

2 Likes