Ionic-framework: bug: Dismissing multiple IonModals using onWillDismiss doesn't work properly

[sebaferreras]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:

I created a demo StackBlitz project where the HomePage presents a modal ModalOnePage and that modal also presents a modal ModalTwoPage. When dismissing the ModalTwoPage returning a given result, the ModalOnePage should be dismissed too in order to send that result directly to the HomePage.

The issue is that when dismissing both modals in a very short period of time (using to the onWillDismiss), only the ModalTwoPage is actually being dismissed.

Expected behavior:

Both modals ModalOnePage and ModalTwoPage should be dismissed.

Steps to reproduce:

In the demo StackBlitz project, click on the "Open Modal One" button to open the first modal and then on the "Open Modal Two" button to open the second modal. Then click on the "Dismiss and return value".

Both modals should be dismissed but only the ModalTwoPage is actually dismissed.

Related code:

StackBlitz: https://stackblitz.com/edit/ion-issue-closing-multiple-modals-at-once

Other information:

I think the issue could be caused because the ModalTwoPage is still "being dismissed" when the ModalOnePage tries to dismiss itself and maybe behind the scenes Ionic's source code is actually ignoring that call to the dismiss() method because of that.

If you edit the ModalPageOne to add a 500ms delay before dismissing that modal, everything works as expected.

// Using a timeout "avoids" the issue
const useTimeout = false; // <--- here!

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.12
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 9.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 23 other plugins)

Utility:

   cordova-res                          : 0.15.1
   native-run (update available: 1.2.2) : 0.2.6

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.2
   npm               : 6.9.0
   OS                : macOS Catalina
   Xcode             : Xcode 12.0 Build version 12A7209

[liamdebeasi]

Thanks for the issue. The problem here is that you are using the ModalController to dismiss ModalOne before ModalTwo has dismissed. By default the dismiss method on ModalController will attempt to dismiss the most recently opened modal. In this case, that is ModalTwo.

To work around this, you should present ModalOne with an ID and then pass that ID to modalController.dismiss to tell it to dismiss ModalOne.

ModaOne creation:

const modal = await this.modalController.create({
  component: ModalOnePage,
  id: "modal-one"
});

ModalOne dismiss in modal-one.page.ts:

this.dismiss(data, "modal-one");

...

public async dismiss(param?: number, id?: string) {
  console.log(`1️⃣ About to dismiss ModalOnePage sending data ${param} ${id}`);
  await this.modalController.dismiss(param, undefined, id);
  console.log(`1️⃣ Dismissed ModalOnePage sending data ${param} ${id}`);
}

Can you give that a try and let me know if it resolves the issue?

[sebaferreras]

@liamdebeasi Thank you so much for such a quick response!

You're absolutely right, adding the id resolves the issue.

I've updated the StackBlitz project to set the modal id just in case if anyone else has this "issue" in the future.

Working demo project: https://stackblitz.com/edit/ion-issue-closing-multiple-modals-at-once-solved

Thanks again for your help! :)

[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.