Ionic-framework: ion-refresher fired multiple times

[traziusbiztest]

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

[liamdebeasi]

Hi there,

Thanks for the issue. Which browser/OS are you seeing this on?

Thanks!

[traziusbiztest]

Hi,

Android 5.0.2
Android 8

Windows - Chrome 72.0.3626.121
Mac OS - Safari latest

In my video, I used documentation web page - Chrome browser

[petrot]

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

[liamdebeasi]

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

[lmanata]

I've also run into the same issue, are you aware of any workaround or "temporary fix"?

Thanks!

[traziusbiztest]

Temporary solution:

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

[kyawswarthwin]

Same thing happened to me.
https://github.com/ionic-team/ionic/issues/17891

[smxdevst]

Same

[dansiemens]

Same

[pipoa]

same randomly

[Ajax-ua]

Will it be fixed?

[Dzhekson6000]

same on version 4.5.0
same on version 4.6.2
same on version 4.7.0-dev.201907152031.7ae9303

[cyptus]

without the workaround from traziusbiztest this makes ion-refresher as a basic ionic component useless.

[daltonpearson]

I'm still getting the same bug on ios, with version 4.8.0 of ionic.

[bryplano]

Anyone have a simple sample application / repo that demonstrates this problem?

I can't seem to reproduce this issue. My refresher works as I expect it to work. The video originally included just looks like someone randomly scrolling at the top to trigger the refresher.

Some more information would be very helpful. I am using the latest version of Ionic 4 (4.8.1 as of today) and the following environment, and I do not seem to be able to reproduce this on iOS (13.X) or Android (9):

Ionic:

   Ionic CLI                     : 5.2.7
   Ionic Framework               : @ionic/angular 4.8.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.3 ([email protected])
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webvi
ew 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.1 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Catalina
   Xcode             : Xcode 10.3 Build version 10G8

[carlos35010]

Hey guys..
Any solution for this case?

[swapie]

Any solution for this issue?

[FrancMunoz]

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!

[falquinho]

Having this issue too. IONIC 4.0.2 . After a bit realized this only happens if you pull to the pullMax distance. If you trigger the refresh by scrolling just over the pullMin and releasing, it behaves as expected.

[kresogalic8]

@liamdebeasi is it fixed? still having a problem with this.

[liamdebeasi]

As per https://github.com/ionic-team/ionic/issues/17784#issuecomment-526713957, we are still waiting on a code reproduction of the issue. Without that it is unlikely we will be able to resolve this issue. Also if people could test this on Ionic Framework v5 that would be great. v4 is only receiving critical security fixes moving forward.

[LandazuriKastillo]

@liamdebeasi wait didn't you say you were able to reproduce this bug?, why are you waiting for a code?

Thanks for the additional info everyone! I was able to reproduce this issue.

[liamdebeasi]

Yes, I was able to reproduce the issue using an older version of Ionic Framework. I am unable to reproduce the issue with newer versions of Ionic Framework, so I am waiting for a reproduction that shows this issue still exists.

See https://github.com/ionic-team/ionic/issues/17784#issuecomment-526713957 (one of my colleagues) for more information.

[MOnrust]

This issue is still there in the newer versions of Ionic.
I created a quick case:
Video
And code:
https://github.com/MOnrust/ionic-refresher-repro

[maxtomczyk]

I also have this issue, but it looks like one of my views is totally free from this bug. I will try to identify what prevents refresher from this issue.

EDIT:
After checking both views and reading this thread again I found that @FrancMunoz solution works for me.

[b4p3p]

+1

I also have this issue, but it looks like one of my views is totally free from this bug. I will try to identify what prevents refresher from this issue.

EDIT:
After checking both views and reading this thread again I found that @FrancMunoz solution works for me.

[gabibianconi]

@traziusbiztest workaround worked
@FrancMunoz workaround didn't work for me because I need to clean the array for another reason.

Ionic:
Ionic CLI: 5.4.4
Ionic Framework: @ionic/angular 4.11.2
@angular-devkit/build-angular: 0.12.4
@angular-devkit/schematics: 7.3.9
@angular/cli: 7.3.9
@ionic/angular-toolkit: 1.2.3

Cordova:
Cordova CLI: 9.0.0 ([email protected])
Cordova Platforms: not available
Cordova Plugins: not available

[liamdebeasi]

@MOnrust I am still unable to reproduce the issue using that version of Ionic Framework in your repo. Can you please provide some steps to reproduce?

[MOnrust]

I'm not sure how I can provide you with more information on how to reproduce this bug. It appears on any screen with a refresher by activating the refresher (pulling down) and after refreshing is completed scrolling down on the list.

The solution by @FrancMunoz means that the bug is more difficult to reproduce, such that it only occurs every now and than. However, we were still able to reproduce this bug with the proposed solution.

The bug seems to appear most often when scrolling at the bottom of the screen (just above the tab bar). When scrolling at the top of the screen the bug hardly occurs.

[liamdebeasi]

What device/browser are you testing this on?

[MOnrust]

Browsers: Chrome, Edge (chromium), Firefox
Multiple devices running Android and iOS.

[liamdebeasi]

Apologies for the delay in reply. Here are the steps I am following:

1. Pull down on page to reveal pull to refresh component. The ionRefresh event is fired.
2. Wait for Pull to Refresh to complete.
3. Scroll down on the page. The ionRefresh event is not fired again.

From what I understand, the issue is that ionRefresh is firing again in step 3? Am I following the correct steps?

This was tested on Chrome 84 running in both iOS and Android modes.

[liamdebeasi]

Hi everyone,

Because I am no longer able to reproduce the refresher bug on Ionic Framework 5.x, I am going to close this issue. If this is still a bug in the latest version of Ionic Framework, please open a new issue and include a GitHub repo with the code required to reproduce this issue.

This issue is present on Ionic Framework 4.x, so I recommend upgrading to the latest version of Ionic Framework for developers using an older version of the framework.

Thanks!