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>