Infinite scroll stopped working.

Description: Ionic Infinite scroll is no longer working.

Steps to Reproduce: Simply start a new tabs project - ionic start myApp tabs

In tab2.page.html add:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab Two
    </ion-title>
  </ion-toolbar>
</ion-header>
  <ion-content>
    <ion-button (click)="toggleInfiniteScroll()" expand="block">
      Toggle Infinite Scroll
    </ion-button>
  
    <ion-list>
      <ion-item *ngFor="let i of items">{{i}}</ion-item>
    </ion-list>
  
    <ion-infinite-scroll (ionInfinite)="loadData($event)">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>

In tab2.page.ts add

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';
@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})

export class Tab2Page {
  items = [];
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  constructor() {
    for (let i = 0; i < 30; i++) {
      this.items.push( this.items.length );
    }
  }

  loadData(event) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }
      console.log('Done');
      event.target.complete();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.items.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
}

Then save and run ionic serve.

Output:

The infinite scroll just does not work. The loadData method never gets fired. I have also tested on ios and the same problem occurs. I am on ionic 5.2.1, I have also tried with earlier versions and same result.

[liamdebeasi]

Hi there,

This is a known issue with 4.6.0. We are preparing a 4.6.1 release that addresses this issue and hope to have it out soon.

I am going to close this issue in favor of the main 4.6.0 bug tracker: https://github.com/ionic-team/ionic/issues/18655

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.