<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?

2

Yes I just tested and I have the same issue

image
image1626×1428 275 KB

3

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

4

Hi @Liam-Shopify any update on this?
Also s-modal content isn’t scrollable on the mobile app when content exceeds the screen, we can’t scroll to the end. Works fine on desktop.

Setup: Embedded Remix app with @shopify/app-bridge-react, Polaris web components via cdn.shopify.com/shopifycloud/polaris.js, Admin API 2024-07. Reproduces regardless of how the modal is opened or its content.

Is the scroll issue part of the same issue.

Found it I guess it is because of this [Bug] - Polaris web components s-modal content is not scrollable in Safari

5

Hi @Liam-Shopify
We’re still facing an issue with the latest mobile app and Polaris Web Components (s-modal). Both the primary and secondary actions are not triggering the onClick action.

Because of this issue, whenever merchants encounter it, we’re currently asking them to use the web app instead of the mobile app.

Is there any alternative workaround to get this working properly in the mobile app?