Ionic-framework: bug: chained modals doesn't close.

[mluis]

Bug Report

Ionic version:


[x] 5.0.0

Current behavior:

The closing of modal2 doesn't close modal1.

Expected behavior:

Modal1 to close.

Steps to reproduce:

I've written a sample app ready to run.
It's here: https://github.com/mluis/ionic4-modal-modal-issue

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.12 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Utility:

   cordova-res                          : not installed
   native-run (update available: 0.3.0) : 0.2.9

System:

   NodeJS : v13.2.0 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS High Sierra

[NikolaPeevski]

@mluis That is strange, I would assume dismiss closes the _recently_ open modal, instead of the currently active one. Here is a potential workaround using modal ids https://github.com/mluis/ionic4-modal-modal-issue/pull/1

[mluis]

@NikolaPeevski thank you for your contribution. Your workaround solves my app's issue.

[NikolaPeevski]

@brandyscarney Is this issue closable ?

[mluis]

I'm trying to replicate 'overlay does not exist' issue within this github project which is what I'm getting in the app I'm developing.

[NikolaPeevski]

@mluis Maybe you've forgotten to import IonicModule somewhere ?

[mluis]

@NikolaPeevski I have IonicModule.forRoot({menuType: 'overlay'}) imported in the imports section of app.module.ts

[mluis]

This is what's happening:

[mluis]

Adding the code below eliminates the error but doesn't close 'modal1':

const dismissTop = async () => {
            const modal = await this.selfModalCtrl.getTop();
                       modal.dismiss();
  };
  dismissTop();

[NikolaPeevski]

@mluis Can you push your changes in the repository that you've made earlier ? I'll look at it in a few hours, a little bit busy right now.

[mluis]

@NikolaPeevski I'm trying to replicate the overlay issue on the repository.

[mluis]

Managed to overcome the issue on my app with:

const dismissTop = async () => {
                  let modal = await this.selfModalCtrl.getTop();
                  modal.dismiss();
                  modal = await this.selfModalCtrl.getTop();
                  modal.dismiss();
              };
              dismissTop();

This is a workaround.
Feel free and manage the issue closing decision.

Thank you.

[mluis]

@mluis Can you push your changes in the repository that you've made earlier ? I'll look at it in a few hours, a little bit busy right now.

@NikolaPeevski All the changes I've made are in the master branch of my repo. I couldn't replicate the issue in that project though.... not sure why.

[TheLazyHatGuy]

I think this may be similar to this bug - https://github.com/ionic-team/ionic/issues/20610#issuecomment-598100879

[liamdebeasi]

Hi everyone,

Is this still an issue in the latest version of Ionic Framework? I am not able to reproduce the issue anymore.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!