bug: ion-infinite-scroll can't be re-enabled after updating to Ionic 7 about ionic-framework

[romanarangodev]

Hi, I was having the same issue with ion infinite scroll, but after a lot of hours trying to find a solution. I found that using this.infiniteScroll.complete().then(resp=>{
this.infiniteScroll.disabled=true
}) works.

this is mi code, I was working with observables.

async onIonInfinite(event?:any){

this.usuarioService.getTareasByBusqueda(this.termino).subscribe({

  next:(tareas) => {
   

    this.loading=false

    if(tareas?.length===0){
     
      this.infiniteScroll.complete().then(()=>{
         this.infiniteScroll.disabled=true
      })

      return;
    }

    this.usuarioService.miListaDeTareasPorBusqueda.push(...tareas)
    this.usuarioService.miListaDeTareasPorBusquedaBS.next(this.usuarioService.miListaDeTareasPorBusqueda)

    this.infiniteScroll.complete().then(() => {
      this.infiniteScroll.disabled=false
    });

  },
  error:(error:any)=>{
    console.log(error);
    
  }

});

}

Hope this help others!

[brandyscarney]

Thank you for the issue! The complete() method on Infinite Scroll is async, so what is happening is disabled is being set before the complete method is finished. I have updated your provided example to reflect this and see it working now: https://stackblitz.com/edit/angular-wqu2xl-dpbszj?file=src%2Fapp%2Fexample.component.ts

I noticed that our documentation does not include an await, so I have made an internal ticket to get our documentation updated. Let me know if you have any questions!

[bkeepers]

I just ran into this and took way too long to figure out. Like @romanarangodev, I found that you can't disable the ion-infinte-scroll element between the ion-infinite event being fired and the complete callback being called. If you do, it will not re-enable.

This is what I was doing in Vue, which worked great in Ionic 6:

  <ion-infinite-scroll
    :disabled="isLoading || isDonePaginating"
    @ion-infinite="load().then($event.target.complete)"
  >
     …
  </ion-infinite-scroll>

I had to stop using disabled, and just remove the element entirely with v-if once the list was done paginating.

  <ion-infinite-scroll
-   :disabled="isLoading || isDonePaginating"
+   v-if="!isDonePaginating"
    @ion-infinite="load().then($event.target.complete)"
  >
     …
  </ion-infinite-scroll>

The side-effect of this thought is that there are times where it will kick off multiple @ion-infinte events in succession if the user continues to scroll once passing the threshold, so depending on your implementation, you may want to throttle those events.

It would be ideal if the Ionic 6 behavior was restored where the element could be disabled while loading.