fix(content): check for scroll element before modifying it (ionic-tea…

…m#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

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>