onAction Not being fired when part of primaryActions or secondaryActions on a Page

[tedsczelecki]

Issue summary

When trying to customize the Bar buttons and get the click event within my component nothing happens. The same outcome happened in v1.14.1 with the EmbeddedApp and v2.0.0 with AppProvider. I also tried using link and it works correctly.

My react components and the buttons both render, but the onAction is never fired

Expected behavior

onAction should be called and Hello should appear in the console

Actual behavior

Nothing appears in the console

Steps to reproduce the problem

This is the initial render with AppProvider

import { AppProvider } from '@shopify/polaris';
// All other imports

const target = document.querySelector('#root');

render(
  <AppProvider
    apiKey="xxx"
    shopOrigin={`https://xxx.myshopify.com/`}
  >
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <AppContainer />
      </ConnectedRouter>
    </Provider>
  </AppProvider>
    ,
  target
);

and this is the page I am trying to render

const CustomizationScreen = (props) => {
  // ...
  return (
    <Page primaryAction={{content: 'My action', onAction: () => console.log('Hello') }} >
      //... Page specific content
    </Page>
  )
}
  

Specifications

• Polaris version: v1.14.1 or v2.0.0
• React version: 15.X or 16.2
• Browser: Chrome
• Device: Mac
• Operating System: OSX 10.13.4

---

⚓️ We’re not accepting pull requests at this time

🗒 This repo is for reporting issues and feature requests only

[mbaumbach]

@tedsczelecki I opened a similar issue (issue #315). Glad to hear it's not just me. 😄 Are you seeing it in Chrome or iOS? I'm only experiencing it in the Shopify iOS app, works fine in Chrome for me.

[tedsczelecki]

@mbaumbach Yeah I noticed that before submitting mine but thought I'd put another issue in there in case it wasn't related!
Im only testing in Chrome right. Ive tried everything that I can think of and can't get it working for the life of me. Could you share what you have working in Chrome?

[mbaumbach]

@tedsczelecki The code isn't all that different, to be honest. I did the same tests as you with EmbeddedApp in 1.14 and AppProvider in 2.0.0. The only difference between my AppProvider component is that I'm using forceRedirect. My Page component looks the same as yours too. The only actions that worked for me look like this:

<Page primaryAction={{ content: 'Click me', url: 'https://www.google.com' }}>
    // Page content
</Page>

The other thing I seemed to notice was when using secondaryActions, if I brought up the list of secondary actions on the iOS app, sometimes they would be duplicated multiple times in the menu. None of them would work, except for ones with a url defined instead of onAction.

All of my actions seem to work fine on Chrome/Firefox for me though. Since I can't reproduce in on the web, I don't have a lot of insight as to what's going on. You might try adding a debug={true} prop to your AppProvider and see if there's any interesting debug console logs.

[tedsczelecki]

wow... Added debug to the AppProvider and could see that the clicks postmessage was being seen in the console and it said:
[iframe Messenger]: client received from unknown origin ttps://xxx.myshopify.com/. Expected https://xxx.myshopify.com
The issue was having a trailing slash on the shopOrigin prop on the AppProvider.
This new AppProvider is working for me without a trailing slash

<AppProvider
    apiKey="xxx"
    shopOrigin={`https://xxx.myshopify.com`}
    debug
  >

Thanks a bunch for your help and I hope this solves it for you as well

[mbaumbach]

Unfortunately it doesn't (I'm not including an extra slash). Glad it's working for you now though!