Ionic refresher does not get disabled

Ionic Framework Ionic Angular
1

i’m using ion-refresher, to refresh the data which works completely fine, now what i want to do is to disable the refresher for some time to cool it down after refresh but it does not get disabled and i’m still able to pull refresh ,although i can see the updated value of disabled in DOM.

ionic version : 7
angular version: 17
below is my code

 <ion-refresher
      slot="fixed"
      (ionRefresh)="doRefresh($event)"
      [disbaled]="isRefresherDisabled"
    >
      <ion-refresher-content
        pullingIcon="refresh-outline"
        pullingText="Pull to refresh"
        refreshingSpinner="bubbles"
      >
      </ion-refresher-content>
    </ion-refresher>

  async doRefresh(event: any) {
    await this.setEnableDates(true);
    await this.scheduleCache.initDatasource();
    if (event) await event.target.complete();
    this.disableRefresherForCooldown();
  }

  disableRefresherForCooldown() {
    this.isRefresherDisabled = true; // Disable the refresher
    // Re-enable the refresher after 20 seconds
    setTimeout(() => {
      this.isRefresherDisabled = false;
    }, 20000); // Cooldown duration: 20 seconds
  }

image
image445×526 25.9 KB

2

I tried this and it is working as expected. Can you provide your own StackBlitz reproducing the issue?

3

actually i tried on stackblitz and its working as expected , but somehow in my app it causing the issue which i mentioned , can you suggests which things should i check which are likely to cause this issue ?

4

Just reviewed your OP, and [disbaled] is misspelled. Did you misspell it in your actual code too?

5

nope, its not misspell in actual code