trafficstars

Feature Request

Ionic version: [x] 4.x or 5.x

Describe the Feature Request Currently if you present multiple toasts in the same position they show on top of one another which looks like a bug.

Describe Preferred Solution I would suggest one of two things:

Implement toast stacking. If you present multiple toasts, they display in a list like the phone's notification drawer. This is what most UI libraries that display toasts do.

https://getbootstrap.com/docs/4.2/components/toasts/#stacking

Describe Alternatives

Implement toast waiting lists. This means if you present two toasts in the same position at the same time, the second toast that was presented waits for the first toast to be dismissed, then it presents itself.

Related Code Here are examples in Bootstrap Vue: https://bootstrap-vue.js.org/docs/components/toast/#toasts-on-demand

Feb 05 '20 20:02 mattsteve

Thanks for the feature request. We model the behavior of ion-toast after the MD spec, and that spec advises against stacking toast components on top of each other. As a result, toast stacking is not something we are looking to add at this time. https://material.io/components/snackbars/#behavior

Regarding the toast queue, can you explain your use case?

Feb 05 '20 20:02 liamdebeasi

A queue would basically be the same behavior as "Consecutive snackbars" in the link you sent.

When multiple snackbar updates are necessary, they should appear one at a time.

That can be done today with this code:

const toast1 = await toastController.create();
const toast2 = await toastController.create();
await toast1.present();
await toast1.onDidDismiss();
await toast2.present();

My request is that instead of having to wait for onDidDismiss manually, toasts should just automatically handle consecutive display instead of displaying on top of one another.

So basically the above code could be simplified to this in the new design:

const toast1 = await toastController.create();
const toast2 = await toastController.create();
toast1.present();
toast2.present(); // <-- This promise will resolve after toast 1 onDidDismiss, and toast2 presents, instead of presenting the toast immediately and resolving.

Use case:

My problem is our product owners keep asking for toasts to display in very specific situations and are triggered by different pieces of code. If a bunch of these scenarios all occur at once or near the same time, you get a bunch of toasts overlaying each other.

The best solution is if I could leave it as is, the disconnected pieces of code can create toasts and display them as needed, and the toastController will automatically handle displaying them consecutively.

Feb 05 '20 22:02 mattsteve

By the way, this would be per-position. So there's a queue for top, bottom, and center positions. Top, bottom, and center toasts can all display at the same time.

Feb 05 '20 22:02 mattsteve

We would also appreciate ability to display toasts one under another even though it may go against "best practices". Right now displaying multiple toasts at the same time is not much helpful.