Posted in Uncategorized

ion-refresher fired multiple times

   January 23, 2021  4 Comments on ion-refresher fired multiple times

Ionic version: 4.1.0

ion-refresher fired multiple times when I use ion-list with ngFor

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="getItems($event)">
    <ion-refresher-content
      pullingIcon="arrow-down"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-list no-padding *ngFor="let item of items">
    <ion-item>
      {{item.name}}
    </ion-item>
  </ion-list>
</ion-content>

Same error in documentation

ion-refresher documentation

video

I click on the top, pull down -> ion-refresher fired

Move to bottom click and move to the top -> refresher fired again.

Move mouse cursor (without click) -> refresher fired multiple times

Author: Fantashit

4 thoughts on “ion-refresher fired multiple times”

  1. Same problem here. With Chrome, I selected iPhone/iPad simulation and I could reproduce the bug.

    1. Pull down – the refresh works fine
    2. Tried to scroll my list down (drag up the screen) and the refresher fired again and again..

  2. Thanks for the additional info everyone! I was able to reproduce this issue. We will look into this!

  3. Temporary solution:

      completeRefresh(event) {
    event.target.disabled = true;
    event.target.complete();
    setTimeout(() => {
      event.target.disabled = false;
    }, 100);
  }

  4. Maybe It can help…

    I think, in my case was this and worked… the problem is when items is set to an empty Array to be refilled, this will empty the list and the scroll will resize to 0… then, when we add items to items list, all will rebuild but a race condition will occur and the refresher will get scroll when it’s 0 or no scroll is shown and will act in consequence and fire again.

    The solution I used after researching a bit … is don’t clear items, just create a new Array and fill it… and finally replace items with new array.

    This worked for me, hope it helps!

Comments are closed.