toast: multiple show()/hide() causes TypeError

[tlaytongoogle]

Actual Behavior:

• What is the issue? * When $mdToast.show() is called twice and then $mdToast.hide() is also called twice, all in quick succession, it results in "TypeError: Cannot read property 'remove' of undefined" and fails to hide the second toast.
• What is the expected behavior? No TypeError should be thrown, and both toasts should be hidden.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://codepen.io/anon/pen/Xgrzxe
• Details: It looks like an issue with $$interimElement (see https://github.com/angular/material/blob/v1.1.4/src/core/services/interimElement/interimElement.js#L291). If you show() two interim at once, the second doesn't actually show until the first is hidden. But when hide() is called, it immediately remove the latest element of 'showingInterims' for it to hide. Thus, the second hide() finds an empty showingInterims list and so produces undefined, which it tries to hide as if it were an interim, resulting in the TypeError. Meanwhile, once the first interim is actually hidden, the second one shows, having been 'missed' by the second hide().

AngularJS Versions: *

• AngularJS Version: 1.6.4
• AngularJS Material Version: 1.1.4

Additional Information:

• Browser Type: * Google Chrome
• Browser Version: * 58
• OS: * Ubuntu
• Stack Traces:
  TypeError: Cannot read property 'remove' of undefined
  at i (angular-material.min.js:8)
  at Object.h (angular-material.min.js:8)
  at angular-material.min.js:8
  at handleCallback (angular.js:16999)
  at angular.js:16812
  at processQueue (angular.js:16832)
  at angular.js:16876
  at Scope.$digest (angular.js:17971)
  at angular.js:18200
  at completeOutstandingRequest (angular.js:6274) "Possibly unhandled rejection: {}"
  (anonymous) @ console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js:1
  (anonymous) @ angular.js:14525
  (anonymous) @ angular.js:11008
  processChecks @ angular.js:16858
  $digest @ angular.js:17971
  (anonymous) @ angular.js:18200
  completeOutstandingRequest @ angular.js:6274
  (anonymous) @ angular.js:6554

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[tlaytongoogle]

Over a year later, I'm running into the same problem again, and there's been absolutely no movement on this issue, not even an acknowledgment that it's been received. Did I submit it incorrectly somehow? Anyone? Help?

FWIW, I re-tested the problem on AngularJS version 1.7.2 and AngularJS Material version 1.1.10 (https://codepen.io/anon/pen/ZjdVRr), and it's still there.

[Splaktar]

No, your submission looks really good. Thank you very much for the detailed bug report!

We've been catching up with the backlog of untriaged issues. It's down under 250 now, from over 450 when I took over the project in November. But I can certainly understand your frustration!

Thank you so much for verifying again with 1.1.10!

I'm currently deep into a11y fixes for chips, but I should be able to take a look at this pretty soon. Of course, I'd also be very happy to answer questions and help you with a PR if you are interested in that.

[marosoft]

Please take a look at this CodePen.

I made a fix in the code but I noticed I need to set hideDelay to a value grater than 0 (or to remove it completely, which means a default 3s delay would be used). Otherwise the second toast would not disappear.

[Splaktar]

@marosoft the hideDelay(0) settings used in the OP CodePen are there specifically to cause the toasts to not disappear automatically. They should disappear if another toast needs to be shown or they get swiped away.

Your fix seems to be working for me. Can you please submit a PR?