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();
+    overlay.didPresent.emit();
+  }
 }
 
 export async function dismiss(
@@ -115,15 +116,20 @@ export async function dismiss(
   }
   overlay.presented = false;
 
-  overlay.willDismiss.emit({ data, role });
+  try {
+    overlay.willDismiss.emit({ data, role });
 
-  const animationBuilder = (overlay.leaveAnimation)
+    const animationBuilder = (overlay.leaveAnimation)
-    ? overlay.leaveAnimation
+      ? overlay.leaveAnimation
-    : overlay.config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
+      : overlay.config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
-  await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
+    await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
+    overlay.didDismiss.emit({ data, role });
+
+  } catch (err) {
+    console.error(err);
+  }
 
-  overlay.didDismiss.emit({ data, role });
   overlay.el.remove();
   return true;
 }
@@ -137,33 +143,35 @@ async function overlayAnimation(
   animationBuilder: AnimationBuilder,
   baseEl: HTMLElement,
   opts: any
-): Promise<void> {
+): Promise<boolean> {
   if (overlay.animation) {
     overlay.animation.destroy();
     overlay.animation = undefined;
-  }
+    return false;
 
-  // Make overlay visible in case it's hidden
+  } else {
-  baseEl.classList.remove('ion-page-invisible');
+    // Make overlay visible in case it's hidden
+    baseEl.classList.remove('ion-page-invisible');
 
-  const aniRoot = baseEl.shadowRoot || overlay.el;
+    const aniRoot = baseEl.shadowRoot || overlay.el;
-  const animation = overlay.animation = await overlay.animationCtrl.create(animationBuilder, aniRoot, opts);
+    const animation = overlay.animation = await overlay.animationCtrl.create(animationBuilder, aniRoot, opts);
-  overlay.animation = animation;
+    overlay.animation = animation;
-  if (!overlay.animated) {
+    if (!overlay.animated) {
-    animation.duration(0);
+      animation.duration(0);
+    }
+    if (overlay.keyboardClose) {
+      animation.beforeAddWrite(() => {
+        const activeElement = baseEl.ownerDocument.activeElement as HTMLElement;
+        if (activeElement && activeElement.matches('input, ion-input, ion-textarea')) {
+          activeElement.blur();
+        }
+      });
+    }
+    await animation.playAsync();
+    animation.destroy();
+    overlay.animation = undefined;
+    return animation.hasCompleted;
   }
-  if (overlay.keyboardClose) {
-    animation.beforeAddWrite(() => {
-      const activeElement = baseEl.ownerDocument.activeElement as HTMLElement;
-      if (activeElement && activeElement.matches('input, ion-input, ion-textarea')) {
-        activeElement.blur();
-      }
-    });
-  }
-  await animation.playAsync();
-
-  animation.destroy();
-  overlay.animation = undefined;
 }
 
 export function autoFocus(containerEl: HTMLElement): HTMLElement | undefined {