Overlay dismiss fix (#9747)

* fix(loading/toast): don't call to dismiss pages if the view is an overlay

fixes #9589

* test(overlay): add tests for loading and toast with view events

* test(datetime): add missing declaration

src/components/loading/test/basic/app-module.ts

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, LoadingController, NavController } from '../../../..';
+import { App, IonicApp, IonicModule, LoadingController, NavController } from '../../../..';
 
 
 @Component({
@@ -242,6 +242,18 @@ export class E2EPage {
 
     }, 500);
   }
+
+  presentLoadingDismissNav() {
+    this.loadingCtrl.create({
+      spinner: 'hide',
+      content: 'Loading 1 Please Wait...',
+      dismissOnPageChange: true
+    }).present();
+
+    setTimeout(() => {
+      this.navCtrl.push(Page2);
+    }, 500);
+  }
 }
 
 @Component({
@@ -255,7 +267,7 @@ export class E2EPage {
     <ion-footer>
       <ion-toolbar>
         <ion-buttons end>
-          <button ion-button (click)="goToPage3()">
+          <button ion-button icon-right (click)="goToPage3()">
             Navigate
             <ion-icon name="arrow-forward"></ion-icon>
           </button>
@@ -267,12 +279,6 @@ export class E2EPage {
 export class Page2 {
   constructor(public navCtrl: NavController) {}
 
-  ionViewDidLoad() {
-    setTimeout(() => {
-      this.navCtrl.push(Page3);
-    }, 1000);
-  }
-
   goToPage3() {
     this.navCtrl.push(Page3);
   }
@@ -298,6 +304,16 @@ export class Page3 {}
 })
 export class E2EApp {
   root = E2EPage;
+
+  constructor(app: App) {
+    app.viewDidLeave.subscribe(ev => {
+      console.log('App didLeave');
+    });
+
+    app.viewWillLeave.subscribe(ev => {
+      console.log('App willLeave');
+    });
+  }
 }
 
 @NgModule({

src/components/loading/test/basic/main.html

@@ -21,6 +21,7 @@
   <button ion-button block (click)="presentLoadingText()" color="dark">Content Only w/ Nav</button>
   <button ion-button block (click)="presentLoadingMultiple()" color="danger">Multiple Loading</button>
   <button ion-button block (click)="presentLoadingMultipleNav()" color="danger">Multiple Nav Loading</button>
+  <button ion-button block (click)="presentLoadingDismissNav()">Dismiss Page Change</button>
 
 </ion-content>
 

src/components/nav/overlay-portal.ts

@@ -37,7 +37,9 @@ export class OverlayPortal extends NavControllerBase {
 
     // on every page change make sure the portal has
     // dismissed any views that should be auto dismissed on page change
-    app.viewDidLeave.subscribe(this.dismissPageChangeViews.bind(this));
+    app.viewDidLeave.subscribe((ev) => {
+      !ev.isOverlay && this.dismissPageChangeViews();
+    });
   }
 
   @Input('overlay-portal')

src/components/toast/test/basic/app-module.ts

@@ -75,6 +75,19 @@ export class E2EPage {
     toast.present();
   }
 
+  showDismissPageChangeToast() {
+    const toast = this.toastCtrl.create({
+      message: 'I am dismissed on page change',
+      dismissOnPageChange: true
+    });
+    toast.onDidDismiss(this.dismissHandler);
+    toast.present();
+
+    setTimeout(() => {
+      this.navCtrl.push(AnotherPage);
+    }, 1000);
+  }
+
   private dismissHandler(toast: Toast) {
     console.info('Toast onDidDismiss()');
   }

src/components/toast/test/basic/main.html

@@ -11,6 +11,7 @@
 
   <button ion-button block (click)="showToast()">Show Toast and Navigate</button>
   <button ion-button block (click)="showLongToast()">Show Long Toast</button>
+  <button ion-button block (click)="showDismissPageChangeToast()">Show Toast Dismiss Page Change</button>
   <br />
   <button ion-button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
   <button ion-button block (click)="showToastWithCloseButton('bottom')" class="e2eOpenToast">With closeButtonText</button>