Infinite scroll event can't be enabled once disabled

Bug Report

Ionic version:

[x] 4.x

Current behavior:

According to Docs, we can enable infinite scroll event once it’s disabled by toggling as specified here https://ionicframework.com/docs/api/infinite-scroll/ ( this part of code:- this.infiniteScroll.disabled = !this.infiniteScroll.disabled; ) But when I am trying to enable it again, it’s not happening, tried printing this.infiniteScroll.disabled and this.infiniteScroll to console, the “disabled” property’s value is differing once it has been made true.

Tried making it false, but it’s not happening.

Expected behavior:

Once “disabled” property has been made false, infinite scroll event should start working again, and when scrolled downside should perform it’s default behaviour of showing new items in the list.

Steps to reproduce:

Describing the steps according to what we faced:

1. Searched for a particular filter, got the list, infinite scroll works perfectly.
2. When the whole list is retrieved, scroll event been made true (infinite scroll event is disabled by event.target.disabled = true)
3. Searching for another filter, got the list which is not complete. This time since scroll event is diabled it won’t work so we tried making it false (enabling the event listener) using this.infiniteScroll.disabled = false but did not work.

Related code:

export class InfiniteScrollExample {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  constructor() {}

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

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

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

this.infiniteScroll.disabled = !this.infiniteScroll.disabled; <----- Not working.

try this: (b) console.log(this.infiniteScroll); © console.log(this.infiniteScroll.disabled);

the disabled property in both consoles (b) & © will differ once it’s made true (a).

Other information:

Suggestion on how to fix: Make this working - this.infiniteScroll.disabled = false; indeed (event.target.disabled = false) once it has been made true.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.0 (C:\Users\User28\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.8.9
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (C:\Users\User28\AppData\Local\Android\Sdk)
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.7.0
   OS                : Windows 10

[ghost]

Hello @liamdebeasi, I have created a demo repo which has the code to show the issue. Given demo credentials so that you can access and check out the issue. Here is the link

https://github.com/Yaseen-Nadaf/medx-demo

Also please try it on a desktop because it was working fine on a laptop sometimes but not on a desktop.

[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.