When multiple toasts are added, only the last one expires

[izdwuut]

Hi

First of all, great library. It makes designing according to accessibility principles so, so easy (and fun, too!).

During designing my app, I've noticed that when you add multiple Toast with duration property set to ToastContainer, only the last item gets deleted. All of them should get deleted after the set duration.

Here's a minimal working example illustrating what I'm talking about. I've created my app using create-react-app:

import React from 'react';
import {
  Button,
  Toast,
  ToastContainer
} from '@salesforce/design-system-react';

class App extends React.Component {
  state = {
    toasts: []
  }

  addToast = () => {
    const toastsCopy = [...this.state.toasts]
    toastsCopy.push(
      <Toast
        labels={{
          heading: 'Lorem ipsum'
        }}
        duration={1000}
        onRequestClose={() => this.deleteToast(this.state.toasts.length - 1)}
      />
    )
    this.setState({
      toasts: toastsCopy
    })
  }

  deleteToast = id => {
    const toastsCopy = [...this.state.toasts]
    toastsCopy[id] = null
    this.setState({
      toasts: toastsCopy
    })
  }
  render() {
    return (
      <div className="App">
        <Button
          label="Show toast"
          onClick={() => this.addToast()}
        />
        <ToastContainer>
          {this.state.toasts}
        </ToastContainer>
      </div>
    )
  }
}

export default App;

The possible workaround is to override the default behavior - do not use the duration property, but implement deleting an item using setDuration yourself.

[welcome[bot]]

Thanks for opening your first issue! :wave: If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

[izdwuut]

Bumping, as requested by welcome bot.

[stale[bot]]

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.