Ionic-framework: Toast component with duration doesn't dismiss if another toast is present.

[Fenkiou]

Short description of the problem:

When a toast with a duration is displayed after another toast, the duration has no effects, the toast does not hide.

I was having the issue with my app and found the same issue on your toast component demo page.

What behavior are you expecting?

The toast with a duration should be dismissed anyway.

Steps to reproduce:

1. Go to http://ionicframework.com/docs/v2/api/components/toast/Toast/
2. Click on "Show Custom Duration Toast" once. It will dismiss correctly.
3. Click on "Show Toast" then click on "Show Custom Duration Toast". The second toast will not hide.

Which Ionic Version? 2.0.0-beta.7

Not really related question but why there is this Toast component and the ionic-native Toast plugin ? There are doing the same thing for me.

[jgw96]

Hello, thanks for opening an issue with us! Ahh, good catch (: we will have to look into this. So there is a Toast component and an ionic-native toast plugin for a few reasons, but the main reason that stands out to me is that our toast component is more configurable and can be custom styled, as its just a regular angular2 component. Hope that helps!

[hlehmann]

+1

[lurainsin]

Hello!
I've a similar problem, which I think is related to this issue.

If a toast is set to have a duration and has dismissOnPageChange: false, if user change page the toast does not hide.

Example:

let toast = Toast.create({
      message: "Hi everyone!",
      duration: 1000,
      showCloseButton: false,
      dismissOnPageChange: false
    });

[captainjim1]

This issue doesn't seem to be corrected. I have a function

presentToast(msg: string, time = 2000) {
    const toast = this.toastCtrl.create({
        message: msg,
        duration: time,
        position: "top"
    });
    toast.present();
}

I also have a list of items that can be "liked" by clicking on an icon in the list. Whenever an item is "liked" the presentToast method is called.

likeItem( item ){
  // do service work to like item
  this.presentToast("Item liked!");
}

If I "like" a single item I see the toast appear then disappear after the duration has passed. If I like several items in a row I see each toast appear, but only one will disappear (I can tell by the change in the stack of toasts opacity).

Additionally, manually calling .dismiss() on the toast also does nothing.

presentToast(msg: string, time = 2000) {
    const toast = this.toastCtrl.create({
        message: msg,
        duration: time,
        position: "top"
    });
    toast.present();

    setTimeout(() => {
        toast.dismiss();
        console.log("called dismiss");
    }, time + 500);
}

[Remco75]

@captainjim1 I can confirm this, version 3.
I will try to create a plunker to reproduce this

[Remco75]

@captainjim1 I narrowed to version 3.5.0. Are you using that by any change?
see this pllunker, it uses 3.5.0 : http://plnkr.co/edit/S4KNr7PCLlVzRFBWYc4r?p=preview

By changing the version number in line 37 of systemjs.config.js to 3.5.1 you will see it working

[captainjim1]

Interesting! I updated my package.json using the node app "npm-check-updates" (ncu -u; npm install).. it turns out I had a few other things out of date.

 @angular/common                     4.1.3  →   4.3.3 
 @angular/compiler                   4.1.3  →   4.3.3 
 @angular/compiler-cli               4.1.3  →   4.3.3 
 @angular/core                       4.1.3  →   4.3.3 
 @angular/forms                      4.1.3  →   4.3.3 
 @angular/http                       4.1.3  →   4.3.3 
 @angular/platform-browser           4.1.3  →   4.3.3 
 @angular/platform-browser-dynamic   4.1.3  →   4.3.3 
 @ionic-native/core                 3.12.1  →   4.1.0 
 @ionic-native/splash-screen        3.12.1  →   4.1.0 
 @ionic-native/status-bar           3.12.1  →   4.1.0 
 ionic-angular                       3.5.0  →   3.6.0 
 rxjs                                5.4.0  →   5.4.2 
 zone.js                            0.8.12  →  0.8.16 
 @ionic/app-scripts                 1.3.12  →   2.1.3 
 typescript                          2.3.4  →   2.4.2 

Thanks for the help!

[AhSem]

Any workaround for this issue? Whenever there are two toasts on top of each other, they won't be dismissed automatically.

Kinda reluctant to upgrade Ionic version. Very often that I update the library, more issues coming out. So, I would hope to have a workaround.

[Remco75]

@ahsem sorry, no workaround except modifying the source. Although I agree updating ionic is one of the biggest pain points of the lib, I think the upgrade from 3.5 to 3.5.1 is relatively smooth

[captainjim1]

Upgrading via the ionic cli was simple and without issue.. it fixes this problem. Also, if you are using proper source control then you should be able to revert to the older version if the upgrade doesn't work for you

[sudharshanreddyam]

Is there a way I can dismiss the toast from a different function?

toastCreate(){
this.toastinstance = this.toast.create(.........).present()
}

toastDismisser(){
this.toastinstance.dismiss();
}

Here in this case I would like to call toastinstance function dynamically and get the toast dismissed.

[Remco75]

@sudharshanreddyam to close it you need the reference to the originally created toast. So if you expose the toast.create on your class you can call dismiss on it from another function. Or return it from the toastCreate function to get the reference

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.