fix(content): check for scroll element before modifying it (#10374)

* test(refresher): add nav based refresher e2e test

* test(refresher): tweak test to repro issue

* fix(content): check for scroll element

* chore(content): double check for a scroll element

Author: jgw96

src/components/content/content.ts

@@ -498,9 +498,16 @@ export class Content extends Ion implements OnDestroy, OnInit {
    * DOM WRITE
    */
   setScrollElementStyle(prop: string, val: any) {
-    this._dom.write(() => {
-      (<any>this._scrollEle.style)[prop] = val;
-    });
+    if (this._scrollEle) {
+      this._dom.write(() => {
+        // double check here as the scroll element
+        // could have been destroyed in the 16ms it took
+        // for this dom write to happen
+        if (this._scrollEle) {
+          (<any>this._scrollEle.style)[prop] = val;
+        }
+      });
+    }
   }
 
   /**

src/components/refresher/test/navigation/app.module.ts

@@ -0,0 +1,122 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Refresher, NavController } from '../../../../../ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class Page1 {
+  items: string[] = [];
+
+  constructor(public nav: NavController) {
+    for (var i = 0; i < 15; i++) {
+      this.items.push( getRandomData() );
+    }
+  }
+
+  doRefresh(refresher: Refresher) {
+    console.info('Begin async operation');
+
+    getAsyncData().then((newData: string[]) => {
+      for (var i = 0; i < newData.length; i++) {
+        this.items.unshift( newData[i] );
+      }
+
+      console.info('Finished receiving data, async operation complete');
+      refresher.complete();
+    });
+  }
+
+  doStart(refresher: Refresher) {
+    console.info('Refresher, start');
+  }
+
+  doPulling(refresher: Refresher) {
+    console.info('Pulling', refresher.progress);
+  }
+
+  navigate() {
+    this.nav.setRoot(Page2);
+  }
+
+}
+
+function getAsyncData() {
+  // async return mock data
+  return new Promise(resolve => {
+
+    setTimeout(() => {
+      let data: string[] = [];
+      for (var i = 0; i < 3; i++) {
+        data.push( getRandomData() );
+      }
+
+      resolve(data);
+    }, 3000);
+
+  });
+}
+
+function getRandomData() {
+  let i = Math.floor( Math.random() * data.length );
+  return data[i];
+}
+
+const data = [
+  'Fast Times at Ridgemont High',
+  'Peggy Sue Got Married',
+  'Raising Arizona',
+  'Moonstruck',
+  'Fire Birds',
+  'Honeymoon in Vegas',
+  'Amos & Andrew',
+  'It Could Happen to You',
+  'Trapped in Paradise',
+  'Leaving Las Vegas',
+  'The Rock',
+  'Con Air',
+  'Face/Off',
+  'City of Angels',
+  'Gone in Sixty Seconds',
+  'The Family Man',
+  'Windtalkers',
+  'Matchstick Men',
+  'National Treasure',
+  'Ghost Rider',
+  'Grindhouse',
+  'Next',
+  'Kick-Ass',
+  'Drive Angry'
+];
+
+@Component({
+  templateUrl: 'page2.html'
+})
+export class Page2 {
+  constructor() {}
+}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = Page1;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    Page1,
+    Page2
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Page1,
+    Page2
+  ]
+})
+export class AppModule {}

src/components/refresher/test/navigation/main.html

@@ -0,0 +1,32 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Pull To Refresh Navigation</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-refresher (ionStart)="doStart($event)" (ionPull)="doPulling($event)" (ionRefresh)="doRefresh($event)">
+
+    <ion-refresher-content
+      pullingText="Pull to refresh..."
+      refreshingSpinner="bubbles"
+      refreshingText="Refreshing...">
+    </ion-refresher-content>
+
+  </ion-refresher>
+
+  <h1>Pull to refresh and then navigate with the button below</h1>
+
+  <button ion-button (click)="navigate()">navigate</button>
+
+  <ion-list>
+    <ion-item *ngFor="let item of items">
+      {{ item }}
+    </ion-item>
+  </ion-list>
+
+</ion-content>

src/components/refresher/test/navigation/page2.html

@@ -0,0 +1,14 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Pull To Refresh Navigation</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <h1>Page Two</h1>
+
+</ion-content>