button handler in Toast message Ionic 4 is not fired, why?

Question

I am trying to use Ionic ion-toast. I found this example in their website: https://ionicframework.com/docs/api/toast

Now my problem is: "handler" callback for any of the buttons added above is not called and no log appears. I tried this code on Android device and Browser Safari MacOS only both shows same issue.

I tried to use toast.onDidDismiss().then(()=>{ console.log('Closed'); }) but that does not help since I am planning to add more than one button and I want to distinguish which button is clicked.

• I know I can build my own component to do this but I am trying to know if there is something missing in my code or it is a well-known issue with ion-toast.

Code:

  async presentToastWithOptions() {    
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('this log should appear when this icon is clicked.');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('This log should appear when I click done.');
          }
        }
      ]
    });
    await toast.present();
  }

So what I expect: when I click on the Button 'Done' or the icon 'star' (which are 2 buttons added to the toast) I should see the corresponding console.log in my console but actually I get nothing in the console.

I tried to add break-point also but both of these 2 "handler" callbacks are never called.

No error messages in the console...even no related warnings.

Is this normal? or am I missing something?

Answer 1

You just remove role: 'cancel' from Done button object and they start working as expected.