Issue with <s-modal> actions buttons on Shopify Mobile app (App Home, Polaris web component)

Polaris
1

Hello,

<s-modal> actions buttons does not work on the Shopify Mobile app only (works fine on web)

Issue/Problem:

  • Inside <s-modal> components, actions button are not working properly
  • Only on the Shopify mobile app, I tried on both Android and iOS (it works properly on the web)
  • The command and onClick are not triggered/does not work

Can be reproduced even with the basic example from the doc:
https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/modal

<>
  <s-button commandFor="info-modal" command="--show">
    Show product info
  </s-button>

  <s-modal id="info-modal" heading="Product information">
    <s-text>
      This product is currently out of stock and cannot be ordered.
    </s-text>

    <s-button slot="secondary-actions" commandFor="info-modal" command="--hide">
      Close
    </s-button>
  </s-modal>
</>

Expected :

  • Close button should hide modal, but it does nothing

What I’ve tried :
Tried to remove slot params from the s-button, but i ran into another issue

  • the buttons are now rendered in two places, in the modal footer (like it was with the slot), and at the place they should render logically without the slot props
  • the buttons rendered in the footer still doesn’t works
  • the other ones work
    But this is not a satisfying fix, as it is confusing for the user and does not follow Shopify guidelines

So is it expected to not work on mobile yet ? Or is there something to be done ?

2

Hi @fafifox

Thanks for flagging this issue - we’re looking into it now.

1 Like
3

@Liam-Shopify (cc: @Fio and @Anthony_Frehner for extra visibility) I’ve had some of my app users contact me noticing this issue! They’re not really happy with “it’s a shopify bug” as an explanation. Is this getting fixed soon?

In case the team is having trouble replicating, you can replicate my app conditions by putting the following in the app.additional.tsx of the react-router template and loading it up in the mobile app:

export default function ModalTest() {
  const shopify = useAppBridge();

  return (
    <s-page heading="Modal Test">
      <s-button
        slot="primary-action"
        commandFor="send-snapshot-modal"
        command="--show"
      >
        Show Modal
      </s-button>
      <s-modal id="send-snapshot-modal" heading="Send account snapshot?">
        <s-paragraph>Do the thing?</s-paragraph>
        <s-button
          slot="primary-action"
          variant="primary"
          commandFor="send-snapshot-modal"
          command="--hide"
          onClick={() => shopify.toast.show("Did the thing!")}
        >
          Yes
        </s-button>
        <s-button
          slot="secondary-actions"
          commandFor="send-snapshot-modal"
          command="--hide"
        >
          Cancel
        </s-button>
      </s-modal>
    </s-page>
  );
}
4

Should note that I’m using the Shopify App on an iPhone running iOS 26.1.

5

Any update on this one? I’m working on an app and hit same issue.

6

Hi @Liam-Shopify ,

I’m facing the same issue on the iPad device. For more details, please review the following ticket: