Ionic (Angular) alert handler method called twice

Question

I am using Ionic v. ^5.0.7 (Angular v. ~9.1.6 ) for my web app and I have this weird issue - when I close alert and handler method is called, it's calling itself twice in a row.

I had this issue before, but somehow after some time it stopped and start behave normally, but this time, this issue is still here.

Here is part of my code:

    
async showDialog(iterable: Array<any>) {
    let inputs: Array<any> = [];

    for (const x of iterable) {
      inputs.unshift({
        name: x.title,
        type: "radio",
        label: x.title,
        value: x,
        handler: (value) => {
          this.someOtherMethod(value.value);
          alert.dismiss();
        },
      });
    }

    const alert = await this.alertController.create({
      header: "Title",
      message: "Message",
      inputs: inputs,
      buttons: [
        {
          text: "Cancel",
          role: "cancel",
          cssClass: "cancel-t-button",
          handler: () => {},
        },
        {
          text: "Add",
          role: "ok",
          cssClass: "add-t-button",
          handler: () => this.someMethod(),
        },
      ],
    });

    await alert.present();
  }

When I close this alert by clicking on "Add" button, handler method (console.log) is called twice in a row. Do you have any idea, where the issue could be?

Thanks for your help.

Answer 1

I opened a issue https://github.com/ionic-team/ionic/issues/21618 and this bug is fixed in Ionic v5.2.2

Answer 2

I fixed this by removing role attribute from cancel button and adding role: "cancel" to the add button. It is not the best solution, but it works... I think that problem is in the Ionic Framework.