[Toast] `onDismiss` was not called on dismiss

[michenly]

Issue summary

• Using an embedded app with the Toast component.
• Notice the onDismiss function was never called.

Expected behavior

the onDismiss function should be called when

1. the toast hide because the duration had ran out
2. the user click on the dismiss button

Actual behavior

The onDismiss is never called.
I do see both APP::FLASH::SHOW and APP::TOAST::CLEAR appearing in the redux dev tool at the correct time. So I believe this is a polaris only issue on how onDismiss is bind to the action.

https://github.com/Shopify/polaris-react/blob/master/src/components/Toast/Toast.tsx#L58

Steps to reproduce the problem

1. Create an embedded app with AppProvider and load the app in shopify admin
2. Add the basic toast component from https://polaris.shopify.com/components/feedback-indicators/toast in the app
3. console log out toggleToast function
4. Notice the toggleToast was not called

Reduced test case

Playground

import * as React from "react";
import { render } from "react-dom";
import { AppProvider, Page, Toast, Button } from "@shopify/polaris";
import "@shopify/polaris/styles.css";

interface State {
  showToast: boolean;
}

class Playground extends React.Component {
  state = {
    showToast: false
  };

  render() {
    const { showToast } = this.state;
    const toastMarkup = showToast ? (
      <Toast content="Message sent" onDismiss={this.dismiss} />
    ) : null;

    return (
      <AppProvider apiKey="API_KEY">
        <Page title="Toast example">
          <Button onClick={this.toggleToast}>Show Toast</Button>
          {toastMarkup}
        </Page>
      </AppProvider>
    );
  }

  toggleToast = () => {
    this.setState(({ showToast }) => ({ showToast: !showToast }));
  };

  dismiss = () => {
    console.log('dismiss');
    this.setState(({ showToast }) => ({ showToast: !showToast }));
  };
}

render(<Playground />, document.getElementById("root"));

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 3.1.1
• Browser: Chrome
• Device: MacBook
• Operating System: MacOS Mojave

[michenly]

cc @tmlayton

[dpersing]

Hi @michelleyschen! It seems likely this was related to the issue with ToastProps fixed in #722 and pushed as part of version 3.2.1. Can you verify? (cc @tmlayton)

[alekseyg]

I can reproduce this issue in an embedded app using Polaris 3.3.0

[yourpalsonja]

@tmlayton is this still a Polaris issue, or should it belong in the AppBridge repo now?

[tmlayton]

As of the latest version this is working as expected.

[mason2205]

any way after duration do set showToast to false again?