Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Toasts overlap #4822

Closed
okelepko opened this issue Sep 24, 2015 · 2 comments
Closed

Toasts overlap #4822

okelepko opened this issue Sep 24, 2015 · 2 comments
Assignees
Labels
needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P5: nice to have These issues will not be fixed without community contributions.
Milestone

Comments

@okelepko
Copy link

Try http://jsfiddle.net/gm1o55nt/

Expected
5 toasts appear consecutively.

Actual:
You can see only the last toast ('4').

From the spec:

There is only ever one snackbar displayed. When a second snackbar is triggered while the first is displayed, the first should start the contraction motion downwards before the second one animates upwards.

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsX3VhUHNoaWVEbDQ/components_snackbars_usage_consecutivesbdifferenttype_005.webm

@RolandHeath
Copy link

TL:DR - Your fiddle is slightly wrong, but there is still an issue. Toasts aren't overlapping, but if they're cancelled before display, they will never show.

My initial thoughts on how to fix this fiddle - wrap the $mdToast.show() call in a $timeout.
This has 2 problems:

  1. i will be updated all the way to 5 before displaying our toast, which means that each one will have the same value. We can fix this in the example case using an array with array.foreach.
  2. The underlying problem you described is still there (but a little better behaved) - $mdtoast.show() doesn't queue snackbars, so in the event that 5 show up at once, you're guaranteed to miss at least 3 of them.
    This can be seen in an updated fiddle, http://jsfiddle.net/goexhv5j/

This might be caused by using $mdToast.cancel instead of $mdToast.hide. This occurs at least once, in the onShow function of toastDefaultOptions. However, it still only seems to be an issue if you're creating multiple toasts from the same event.

@EladBezalel EladBezalel added the needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community label Jan 9, 2016
@EladBezalel EladBezalel added this to the 1.1.0 milestone Jan 9, 2016
devversion added a commit to devversion/material that referenced this issue Jan 14, 2016
After this patch, the interim stack will pick up the latest element which
is not in hide process. At the moment we always take the first, but this
one can be in hide progress.

Fixes angular#6633 Fixes angular#4822
@ThomasBurleson ThomasBurleson added the P5: nice to have These issues will not be fixed without community contributions. label Jan 15, 2016
@ThomasBurleson ThomasBurleson modified the milestones: 1.1.0, Backlog Jan 15, 2016
devversion added a commit to devversion/material that referenced this issue Feb 1, 2016
After this patch, the interim stack will pick up the latest element which
is not in hide process. At the moment we always take the first, but this
one can be in hide progress.

Fixes angular#6633 Fixes angular#4822
devversion added a commit to devversion/material that referenced this issue Feb 1, 2016
After this patch, the interim stack will pick up the latest element which
is not in hide process. At the moment we always take the first, but this
one can be in hide progress.

Fixes angular#6633 Fixes angular#4822
devversion added a commit to devversion/material that referenced this issue Feb 1, 2016
After this patch, the interim stack will pick up the latest element which
is not in hide process. At the moment we always take the first, but this
one can be in hide progress.

Fixes angular#6633 Fixes angular#4822
devversion added a commit to devversion/material that referenced this issue Feb 1, 2016
After this patch, the interim stack will pick up the latest element which
is not in hide process. At the moment we always take the first, but this
one can be in hide progress.

Fixes angular#6633 Fixes angular#4822
devversion added a commit to devversion/material that referenced this issue Feb 7, 2016
After this patch, the interim stack will pick up the latest element which
is not in hide process. At the moment we always take the first, but this
one can be in hide progress.

Fixes angular#6633 Fixes angular#4822
devversion added a commit to devversion/material that referenced this issue Feb 7, 2016
After this patch, the interim stack will pick up the latest element which
is not in hide process. At the moment we always take the first, but this
one can be in hide progress.

Fixes angular#6633 Fixes angular#4822
devversion added a commit to devversion/material that referenced this issue Feb 7, 2016
After this patch, the interim stack will pick up the first added element from the stack which
is not in hide process. At the moment we always take the first added (not caring about current hide process).

Also the stack always removes the elements immediately, which causes errors when showing multiple interims (for example spamming toasts). After this fix, we will remove the elements after the hide-process is done (like a stack queue)

Fixes angular#6633 Fixes angular#4822
@devversion devversion assigned devversion and unassigned EladBezalel Mar 21, 2016
@devversion devversion modified the milestones: 1.1.3, Backlog, 1.3.0 Apr 14, 2016
@ThomasBurleson ThomasBurleson modified the milestones: 1.3.0, Backlog Apr 20, 2016
@ThomasBurleson ThomasBurleson removed this from the 1.3.0 milestone Apr 20, 2016
@ThomasBurleson ThomasBurleson modified the milestones: - Backlog, Deprecated May 26, 2016
@ThomasBurleson
Copy link
Contributor

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P5: nice to have These issues will not be fixed without community contributions.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants