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