question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ion-refresher does not work when refresh completes on another page

See original GitHub issue

Bug Report

Ionic version:

[x] 5.1.0

Current behavior:

When you start a refresh action on page 1 and the refresh action complete while you are not on page 1, you can not start a refresh action again on page 1. This behavior happens only on android, works perfectly on ios.

Expected behavior:

You should be able to refresh again, even if the refresh action completed while you were on another page!

Steps to reproduce:

Start a new Ionic project with the 3 tabs. Place ion-refresher on tab 1 and present a toast after refresh action complete. Start a new refresh action on tab 1 and then navigate to tab 2. Wait until refresh action completes and then navigate back to tab 1. Try to refresh again.

Related code:

You can find the reproduction code at my GitHub repository.

refresh(event) {
  setTimeout(() => {
    this.presentToast();
    event.target.complete();
  }, 4000);
}

async presentToast() {
  const toast = await this.toastController.create({
    message: 'Refresh completed!',
    duration: 2000
  });
  toast.present();
}
<ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
    <ion-refresher-content></ion-refresher-content>
</ion-refresher>

Other information:

Ionic info:

   Ionic CLI                     : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.0
   @capacitor/core : 2.0.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
NickSklAcommented, May 7, 2020

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/angular@5.2.0-dev.202005071622.6e0a210

Yes, everything works perfectly now!

1reaction
liamdebeasicommented, May 7, 2020

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/angular@5.2.0-dev.202005071622.6e0a210

Read more comments on GitHub >

github_iconTop Results From Across the Web

bug: ion-refresher does not work when refresh completes on ...
Place ion-refresher on tab 1 and present a toast after refresh action complete. Start a new refresh action on tab 1 and then...
Read more >
ion-refresher is not refreshing the page content - Stack Overflow
Try completing the refresh action after async operation is complete. Put the complete function call inside then.
Read more >
Ion-refresher is not refreshing page contents - Ionic Forum
I have this piece of code: export class JobsPage { jobs: Jobs[] constructor(public navCtrl: NavController, private jobsData: JobsData) ...
Read more >
ion-refresher causing fixed elements to scroll - You.com
When you refresh, it will move down your scroll-content, where your fixed container is placed in. <ion-toolbar> should fix this problem. Open side...
Read more >
Ionic Framework Tutorial 11: Pull-to-refresh (News Reader
Learn how to add pull-to- refresh feature in your ionic app.COde: http://clan.codedamn.com/viewtopic.php?f=11.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found