[v2] Ion-infinite-scroll error when leaving page #5760

jboothe · 2016-03-07T19:51:51Z

Just wanted to bring to your attention the following error when leaving a page that uses ion-infinite-scroll:

EXCEPTION: TypeError: Cannot read property 'removeEventListener' of null

  <ion-infinite-scroll (infinite)="doInfiniteScroll($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

Reproduce by:

Add the above code to a list page
Navigate to that page
Navigate to another page
View console output

My system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.3.1
Xcode version: Xcode 7.2.1 Build version 7C1002

Not positive, but this could also be related to this similar issue.

The text was updated successfully, but these errors were encountered:

adamdbradley · 2016-03-07T22:41:45Z

I updated this test to have the ion-infinite-scroll within a nav, but I'm not getting an error when going to and from the page: https://github.com/driftyco/ionic/tree/2.0/ionic/components/infinite-scroll/test/basic

What do I need to update so I can replicate that error? Thanks

jboothe · 2016-03-08T03:32:39Z

Thanks, Adam for taking a look at this. Here are the steps to reproduce.

> ionic start tut tutorial --v2 --ts
> cd tut

Add the following code:

// list.html
...
</ion-list>

  <ion-infinite-scroll (infinite)="doInfiniteScroll($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <div *ngIf="selectedItem" padding>

then...

// list.ts
...
doInfiniteScroll(infiniteScroll) {
    console.log('Begin async operation');
  }

then...
> ionic serve

Click menu > My First List
Click menu > Hello Ionic

This error is thrown twice:
EXCEPTION: TypeError: Cannot read property 'removeEventListener' of null

jboothe · 2016-03-08T18:31:53Z

I noticed something that may help zero in on the issue. If you do this, no error is thrown:

Click menu > My First List
Click a list item
Click the Back arrow

However, clicking menu > My First List, then menu > Hello Ionic, the error is thrown.

juliocbcotta · 2016-03-08T20:39:19Z

It seems to happen with the ion-refresher too.

mebibou · 2016-03-11T08:45:23Z

Yep confirming I have the same problem since I put the <ion-refresher> on my page, and leaving the page I always get this error

iignatov · 2016-03-13T19:27:55Z

I can confirm that the bug still exists in beta.3. As @jboothe mentioned, the exception is thrown when leaving the page that contains <ion-infinite-scroll> component. Also, as pointed out by the others, the bug affects also the <ion-refresher> component.

Steps to reproduce:

Open: https://plnkr.co/edit/qh5So0FetPKKzjYu3CYf?p=preview
Follow the instructions in the demo environment.

Other information:
I did some debugging and realized that the exception is thrown when the InfiniteScroll component tries to remove an event-handler after the element to which the handler is attached is already removed by Content.ngOnDestroy(). The removal procedure is triggered by InfiniteScroll.ngOnDestroy(), which for some reason is called after Content.ngOnDestroy() (InfiniteScroll's host component) has been already completed. A null-check in the function returned by Content._addListener() should fix the problem but I'm not sure if the remaining handler will be removed automatically. In theory when the component's ngOnDestroy() is called before the one of its host component has completed, everything should work fine, but I have no idea why in practice it's called after. I guess that it might be either async by design (without a guarantee which is called first) or due to a bug in Angular 2.

export class Content extends Ion {
  // ...
  private _addListener(type: string, handler: any): Function {
    if (!this.scrollElement) { return; }

    // ensure we're not creating duplicates
    this.scrollElement.removeEventListener(type, handler);
    this.scrollElement.addEventListener(type, handler);

    return () => {
      // NOTE: The exception is thrown here, this.scrollElement is NULL.
      // NOTE: Triggered by InfiniteScroll._setListeners(false) after Content.ngOnDestroy().
      // this.scrollElement && // <- this should fix the problem, but what about the remaining handler?
      this.scrollElement.removeEventListener(type, handler);
    }
  }
  // ...
  // NOTE: Executed and completes before the one of its nested component.
  ngOnDestroy() {
    this._scLsn && this._scLsn();
    // NOTE: The scrollElement is destroyed before InfiniteScroll removes the handler.
    this.scrollElement = this._scLsn = null;
  }
  // ...
}

export class InfiniteScroll {
  // ...
  // NOTE: Executed later than Content.ngOnDestroy().
  ngOnDestroy() {
    // NOTE: This triggers the remove function returned by Content._addListener().
    this._setListeners(false);
  }
}

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt:

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS: Windows 8.1
Node Version: v5.8.0

thiphariel · 2016-03-18T09:50:18Z

Confirming same bug on ion-refresher too. Back button & swipe back throws the error.

apat183 · 2016-03-19T12:54:20Z

Confirmed same for me when adding ion-refresher.

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5 
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v5.4.0
Xcode version: Xcode 7.2 Build version 7C68

tuongaz · 2016-03-22T05:15:30Z

I got the same issue

This fix [5760](ionic-team#5760)

wangtiantian2016 · 2016-03-25T08:21:05Z

I got the same issue.

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS: Windows 7 SP1
Node Version: v4.3.1

cperez87 · 2016-03-30T19:01:35Z

Experiencing same problem.

My system info:
Cordova CLI: 6.1.0 (cordova-lib@undefined)
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.23
Ionic App Lib Version: 2.0.0-beta.13
Node Version: v5.9.1

warnerpinz · 2016-04-02T18:32:47Z

I'm stuck on this error.
Are there any workaround for this?

Artfloriani · 2016-04-03T13:54:08Z

@warner-pinz I guess we have to wait til beta.4

iignatov · 2016-04-03T21:25:54Z

@warner-pinz You could apply the fix directly in your project:

From inside of your project's folder open the following path:
node_modules/ionic-angular/components/content/content.js
Search for this string:
_this.scrollElement.removeEventListener(type, handler);
Add a new line right before it and there paste the following:
if (!_this.scrollElement) { return; }
Save the file.
The problem should be fixed.

denkomanceski · 2016-04-04T11:16:29Z

Yep, I have the same problem.

adamdbradley · 2016-04-11T03:24:30Z

Is this still an issue with beta4?

thiphariel · 2016-04-11T07:32:56Z

@adamdbradley Hey, I tried, and the problem is solved for me, but with ion-refresher as mentionned (#5760 (comment))
So it's probably solved for ion-infinite-scroll too.

Waiting for confirmation :)

Thanks !

perdjurner · 2016-04-11T07:55:48Z

Fixed for me.

adamdbradley · 2016-04-11T20:41:22Z

Great thanks!

iignatov · 2016-04-11T20:55:00Z

I updated the demo plunker environment to beta.4 and can confirm that the problem is fixed for both <ion-infinite-scroll> and <ion-refresher>.

PRATHYUSH-DOM · 2016-05-25T11:15:35Z

thanks problem fixed....thankyou IIgnatov...

Ionitron added refresher labels Mar 7, 2016

adamdbradley self-assigned this Mar 7, 2016

adamdbradley added this to the 2.0.0-beta.4 milestone Mar 7, 2016

trongrg added a commit to trongrg/ionic that referenced this issue Mar 24, 2016

fix(ion-infinite-scroll): Fix error leaving page

05823f9

This fix [5760](ionic-team#5760)

trongrg mentioned this issue Mar 24, 2016

fix(ion-infinite-scroll): Fix error leaving page #5930

Merged

cperez87 mentioned this issue Mar 30, 2016

bug: Cannot read property 'removeEventListener' of null #5989

Closed

This was referenced Apr 2, 2016

bug: TypeError: Cannot read property 'direction' of null #5737

Closed

infinite scroll EXCEPTION: TypeError: Cannot read property 'removeEventListener' of null when navigating away #5998

Closed

brandyscarney modified the milestones: 2.0.0-beta.4, 2.0.0-beta.5 Apr 7, 2016

adamdbradley closed this as completed Apr 11, 2016

scferg mentioned this issue Nov 30, 2016

Can't place InfiniteScroll inside custom component #6531

Closed

ionitron-bot bot locked and limited conversation to collaborators Sep 8, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v2] Ion-infinite-scroll error when leaving page #5760

[v2] Ion-infinite-scroll error when leaving page #5760

jboothe commented Mar 7, 2016

adamdbradley commented Mar 7, 2016

jboothe commented Mar 8, 2016

jboothe commented Mar 8, 2016

juliocbcotta commented Mar 8, 2016

mebibou commented Mar 11, 2016

iignatov commented Mar 13, 2016

thiphariel commented Mar 18, 2016

apat183 commented Mar 19, 2016

tuongaz commented Mar 22, 2016

wangtiantian2016 commented Mar 25, 2016

cperez87 commented Mar 30, 2016

warnerpinz commented Apr 2, 2016

Artfloriani commented Apr 3, 2016

iignatov commented Apr 3, 2016

denkomanceski commented Apr 4, 2016

adamdbradley commented Apr 11, 2016

thiphariel commented Apr 11, 2016

perdjurner commented Apr 11, 2016

adamdbradley commented Apr 11, 2016

iignatov commented Apr 11, 2016

PRATHYUSH-DOM commented May 25, 2016

[v2] Ion-infinite-scroll error when leaving page #5760

[v2] Ion-infinite-scroll error when leaving page #5760

Comments

jboothe commented Mar 7, 2016

adamdbradley commented Mar 7, 2016

jboothe commented Mar 8, 2016

jboothe commented Mar 8, 2016

juliocbcotta commented Mar 8, 2016

mebibou commented Mar 11, 2016

iignatov commented Mar 13, 2016

thiphariel commented Mar 18, 2016

apat183 commented Mar 19, 2016

tuongaz commented Mar 22, 2016

wangtiantian2016 commented Mar 25, 2016

cperez87 commented Mar 30, 2016

warnerpinz commented Apr 2, 2016

Artfloriani commented Apr 3, 2016

iignatov commented Apr 3, 2016

denkomanceski commented Apr 4, 2016

adamdbradley commented Apr 11, 2016

thiphariel commented Apr 11, 2016

perdjurner commented Apr 11, 2016

adamdbradley commented Apr 11, 2016

iignatov commented Apr 11, 2016

PRATHYUSH-DOM commented May 25, 2016