race condition in $mdToast show/hide

[tlaytongoogle]

Actual Behavior:

• What is the issue? *
• There seems to a race condition in $mdToast. If $mdToast.show() is called, and then $mdToast.hide() is called a sufficiently short time later, then hide() will execute before show() has actually generated the toast DOM, and thus will fail to actually hide the toast.
• This issue is exacerbated if show() is called while a previous toast is still being displayed, because the time taken to hide the previous toast further delays the generation of the new toast DOM.
• The issue seems to be the result of this line:

  material/src/core/services/interimElement/interimElement.js

  Line 297 in e898d22

  hideExisting.finally(function() {

  . Specifically, the fact that the DOM manipulation is performed asynchronously there, but the surrounding show() method does not wait for that asynchronous operation to complete before returning, nor does it return the resulting promise so that the calling code can wait (it does return a promise, but tied to a different event).
• Moreover, because this line is in interimElement.js, it's possible that it affects other services than just $mdToast (e.g. $mdDialog), although I haven't tested for that.
• What is the expected behavior? hide() should hide the toast as long as it's called after show(), even if immediately after.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/jAKgEZ
• Details: See the CodePen for information about what specific circumstances do and do not run afoul of the race condition.

Angular Versions: *

• Angular Version: 1.4.8
• Angular Material Version: 1.0.0

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 52.0
• OS: * Linux

[devversion]

@ThomasBurleson @jelbourn - This can be super easily solved after #9053

[devversion]

This is now fixed in master with 421fed4

• See http://codepen.io/DevVersion/pen/kkLQqv?editors=1010