Polaris-react: onDismiss() not functioning

[tlwirtz]

Issue summary

When using the Banner component and passing a function into the onDismiss prop it doesn't appear that the callback ever fires when the dismissal button is pressed.

Expected behavior

Expected the callback to fire when dismissal button is pressed.

Actual behavior

Clicking the dismissal button does not trigger the callback.

Steps to Reproduce the Problem

This is how I'm rendering the Banner. The component displays properly onscreen.

    <Banner title="test" status='warning' onDismiss={() => {console.log('dismissing')}}>
      <p>Just a test.</p>
    </Banner>

Specifications

• Polaris version: 1.0.2
• React version: 15.4.2
• Browser: Chrome 58.0.3029
• Device: Macbook Pro Retina (Mid 2014)
• Operating System: macOS Sierra 10.12.4

NOTE: This repo is only used for reporting issues and new feature requests. We are not accepting pull requests at this point in time.

[lemonmade]

Thanks for the issue, @tlwirtz. Should be fixed in 1.0.3.

[slyapustin]

@lemonmade This is not fixed (at least in 1.9.1).

[tmlayton]

Hi @inoks, I checked out v1.9.1 and tried using the code sample you provided and it is working as expected. Are there other errors happening?

[slyapustin]

@tmlayton Oh, yes that's works, sorry for misleading you.
But what is expected by me is to have some internal way to hide banner if dismiss button was clicked, without creating some external hide/display state.

[tmlayton]

@inoks makes sense, although we avoid managing state within the components and leave it up to the consumer to handle.

[lakshyads]

@tmlayton Oh, yes that's works, sorry for misleading you.
But what is expected by me is to have some internal way to hide banner if dismiss button was clicked, without creating some external hide/display state.

Hi @inoks @tmlayton, I am facing a similar problem. There is no internal way to hide the banner when dismiss button is clicked. You mentioned something about creating external hide/display state. Can you explain how that can be done as this is my first time working with Polaris components and i have had no luck trying to hide the banner.

[chloerice]

@tmlayton Oh, yes that's works, sorry for misleading you.
But what is expected by me is to have some internal way to hide banner if dismiss button was clicked, without creating some external hide/display state.

Hi @inoks @tmlayton, I am facing a similar problem. There is no internal way to hide the banner when dismiss button is clicked. You mentioned something about creating external hide/display state. Can you explain how that can be done as this is my first time working with Polaris components and i have had no luck trying to hide the banner.

Hey @lakshyads, in the code that renders the Banner, you can use a boolean set on your state (let's say showBanner) to manage rendering the banner conditionally. So for instance, in your render method before your return, you can save the banner markup as a variable that is the Banner with whatever props you want if showBanner is true, and null if false. If you want the banner to initially show up and disappear on dismiss, you can set the initial state of showBanner as true, then in the callback that you set on the onDismiss prop you can this.setState({showBanner: false}).

class PageWithDismissableBanner extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      showBanner: true,
    }
  }

  handleBannerDismiss = () => {
    this.setState({showBanner: false})
  }

  render() {
    const {showBanner} = this.state;
    const dismissableBannerMarkup = showBanner ? (
      <Banner title="Your banner title" onDismiss={this.handleBannerDismiss}>
        <p>Your banner content</p>
      </Banner>
    ) : null

    return (
      <Page title="Your page title">
        {dismissableBannerMarkup}
        {your other page markup}
     </Page>
    );
  }
}