feat: resolve overlay present method early when dismissing during enter animation

[rbalet]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

If I close the modal to quickly, the onWillDismiss() will never occur.

Expected Behavior

Working as if I would close the modal normally

Steps to Reproduce

<ion-button (click)="openModal()">Test modal</ion-button>

  async openModal() {
    const modal = await this._modalController.create({
      component: Tab2Page,

      cssClass: 'modal-alert-component',
    });

    await modal.present();

    const response = await modal.onWillDismiss();

    console.log('response', response);
  }

1. Open the chrome dev tool under the console element
2. Click on the Test modal
3. Click on escape button of your keyboard directly after opening it
4. response Won't be logged, as the onWillDismiss() is not triggered.

Code Reproduction URL

https://github.com/rbalet/error-on-will-dismiss

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.8.2 @angular-devkit/build-angular : 17.3.3 @angular-devkit/schematics : 17.3.3 @angular/cli : 17.3.3 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 5.7.4 @capacitor/android : not installed @capacitor/core : 5.7.4 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.11.0 (/usr/local/bin/node) npm : 10.2.4 OS : macOS Unknown

Additional Information

No response

[sean-perkins]

Hello @rbalet thanks for reporting this issue! Can you make your reproduction public?

[rbalet]

@sean-perkins done

Sorry I though I did '^^

[sean-perkins]

Hello @rbalet, thanks for making the repository public!

As a workaround you can update your usage to:

async openModal() {
  const modal = await this._modalController.create({
    component: Tab2Page,

    cssClass: 'modal-alert-component',
  });

  modal.present();

  const response = await modal.onWillDismiss();

  console.log('response', response);
}

By awaiting modal.present() you were blocking execution until the modal was fully presented. This means when dismissing the modal before the animation completes, the lifecycle event is emitted before the onWillDismiss is registered.

I think this is an area we could explore resolving the present promise early if the user dismisses the overlay during the animation to simplify the developer experience.

I'm going to capture this as a feature request 👍

[rbalet]

Makes a lot of sense, thx for the explanation