fix(overlay): animation can be interrupted

fixes #15506

core/src/components/animation-controller/animator.tsx

@@ -1152,6 +1152,9 @@ export class Animator {
    * NO RECURSION
    */
   _didFinish(hasCompleted: boolean) {
+    if (!this.isPlaying) {
+      return;
+    }
     this.isPlaying = false;
     this.hasCompleted = hasCompleted;
 
@@ -1189,6 +1192,7 @@ export class Animator {
    * Recursively destroy this animation and all child animations.
    */
   destroy() {
+    this._didFinish(false);
     this._destroyed = true;
 
     const children = this._childAnimations;

core/src/components/modal/test/basic/index.html

@@ -22,6 +22,12 @@
       <p>
         <ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
       </p>
+      <p>
+        <ion-button id="presentModal" class="e2ePresentModal" onclick="presentCloseModal()">Present and close modal</ion-button>
+      </p>
+      <p>
+        <ion-button id="presentModal" class="e2ePresentModal" onclick="presentCloseModal2()">Present and close modal (crash)</ion-button>
+      </p>
     </ion-content>
     <ion-modal-controller></ion-modal-controller>
 
@@ -30,8 +36,8 @@
   <script>
     window.addEventListener("ionModalDidDismiss", function (e) { console.log('DidDismiss', e) })
     window.addEventListener("ionModalWillDismiss", function (e) { console.log('WillDismiss', e) })
-    async function presentModal() {
 
+    async function createModal() {
       // initialize controller
       const modalController = document.querySelector('ion-modal-controller');
       await modalController.componentOnReady();
@@ -61,7 +67,25 @@
       const modalElement = await modalController.create({
         component: element
       });
-      modalElement.present();
+      return modalElement;
+    }
+
+    async function presentModal() {
+      const modal = await createModal();
+      await modal.present();
+    }
+    async function presentCloseModal() {
+      const modal = await createModal();
+      await modal.present();
+      await modal.dismiss();
+    }
+
+    async function presentCloseModal2() {
+      const modal = await createModal();
+      modal.present();
+      setTimeout(() => {
+        modal.dismiss();
+      }, 20);
     }
   </script>
 </body>

core/src/utils/overlays.ts

@@ -96,9 +96,10 @@ export async function present(
     ? overlay.enterAnimation
     : overlay.config.get(name, overlay.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
-  await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
-
+  const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
+  if (completed) {
     overlay.didPresent.emit();
+  }
 }
 
 export async function dismiss(
@@ -115,6 +116,7 @@ export async function dismiss(
   }
   overlay.presented = false;
 
+  try {
     overlay.willDismiss.emit({ data, role });
 
     const animationBuilder = (overlay.leaveAnimation)
@@ -122,8 +124,12 @@ export async function dismiss(
       : overlay.config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
     await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
-
     overlay.didDismiss.emit({ data, role });
+
+  } catch (err) {
+    console.error(err);
+  }
+
   overlay.el.remove();
   return true;
 }
@@ -137,12 +143,13 @@ async function overlayAnimation(
   animationBuilder: AnimationBuilder,
   baseEl: HTMLElement,
   opts: any
-): Promise<void> {
+): Promise<boolean> {
   if (overlay.animation) {
     overlay.animation.destroy();
     overlay.animation = undefined;
-  }
+    return false;
 
+  } else {
     // Make overlay visible in case it's hidden
     baseEl.classList.remove('ion-page-invisible');
 
@@ -161,9 +168,10 @@ async function overlayAnimation(
       });
     }
     await animation.playAsync();
-
     animation.destroy();
     overlay.animation = undefined;
+    return animation.hasCompleted;
+  }
 }
 
 export function autoFocus(containerEl: HTMLElement): HTMLElement | undefined {