Polaris-react: Page actionGroups don't appear in iOS app navigation

[alekseyg]

Issue summary

I use secondaryActions and actionGroups for navigation in my Sopify Polaris app. Clicking the three dots menu in the iOS app when you have your Shopify app open shows the secondaryActions fine, but actionGroups are nowhere to be seen.

Expected behavior

I expect all the different types of actions I pass to the <Page> component to be accessible whether the app is embedded in the browser or the iOS app, or used standalone.

Actual behavior

The primaryAction and secondaryActions show up in the iOS app navigation, but the actionGroups don't.

This might be a Shopify iOS app issue rather than a Polaris issue, but I'm not sure where I'd report that, and since I am using Polaris, I would assume the two teams communicate to make things work in browsers and mobile apps.

Steps to reproduce the problem

1. Create an embedded Shopify app
2. Use the Page component with actionGroups
3. Install the app in a shop
4. Open the shop in the Shopify iOS app and open the Shopify app within it
5. Click the "three dots" menu and the actionGroups are nowhere to be seen

Specifications

• Polaris version: 1.8.3
• React version: 15.5.4
• Browser: Safari in-app
• Device: iPhone/iPad
• Operating System: iOS

For now, I used a workaround that checks for the user agent for "Shopify Mobile" and send in all the items within the actionGroups as secondaryActions. That way, at least my app is usable inside the iOS app. Example:

<Page
  secondaryActions={/Shopify Mobile/.test(navigator.userAgent) ? [
    {
      content: 'Dashboard',
      onAction: () => history.push('/'),
    },
    {
      content: 'General settings',
      onAction: () => history.push('/settings'),
    },
    {
      content: 'Product settings',
      onAction: () => history.push('/products'),
    },
    ...
  ] : [
    {
      content: 'Dashboard',
      onAction: () => history.push('/'),
    }
  ]}
  actionGroups={[
    {
      title: 'Settings',
      actions: [
        {
          content: 'General',
          onAction: () => history.push('/settings'),
        },
        {
          content: 'Products',
          onAction: () => history.push('/products'),
        },
      ],
    },
    ...
  ]}
>
...
</Page>

[carsonb]

Hi @alekseyg! Thanks so much for bringing this to our attention.
We've reproduced the issue, and created a fix.
The issue affects Shopify Mobile on iOS, but does not on our Android app. We'll be including the fix in our next submission of the app, and I'll update here with the version of the app that includes the fix.

Re-opening the issue to denote that the fix is not yet public.

[ry5n]

We’ve merged a fix for this in the iOS app which has made its way to the live version on the app store 🎉