Snackbar persisting when it should be automatically dismissed

[NickMurphy]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

A new snackbar opening should instantly dismiss the old snackbar.

What is the current behavior?

There is an issue where the old snackbar remains for the whole of its duration. See stackblitz.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

https://angular-material2-issue-c7b8kc.stackblitz.io
https://stackblitz.com/edit/angular-material2-issue-c7b8kc

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested on chrome, IE and edge, Angular 6.0.6, Material 6.3.0

Is there anything else we should know?

[vivian-hu-zz]

@NickMurphy can you help me to understand the bug better? Do you mean once the "new message x" show up, you should not see "message 1", "message 2" or "message 3"?
Do you mean "message x" as one snackbar, and "new message x" as the the 2nd snackbar? And only one of them should exist?

[NickMurphy]

As per the docs, "Only one snack-bar can ever be opened at one time. If a new snackbar is opened while a previous message is still showing, the older message will be automatically dismissed.". This is not what's happening currently. I'd expect in the stackblitz for it to show Message 1 for one second, and then quickly rotate through New Message 1, Message 2, new Message 2, then finally leave Message 3 on the screen for 3 seconds.

You also can't click the action button to dismiss the messages - it just doesn't respond.

[saadmunir]

Material version 7.3.1 dismisses the older snackbar when a new one is opened.

I understand this is the desired behaviour according to specs, however is it possibly to stack snackbars to achieve 'toast' like behaviour?