ion-refresher always fired when pulling up at any position in the page (middle,bottom) not only on top of the page.

[ionitron-bot]

Original issue by @jayzyaj on 2018-07-18T06:32:55Z

Bug Report

I need to make 3 slides using ion-slides component after adding ion-refresher component to my page the ion-refresher always fired when pulling up at any position in the page (middle,bottom) not only on top of the page.

Ionic Info

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.11
    Cordova Platforms  : android 6.3.0 browser 5.0.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.12.2
    npm               : 4.6.1 
    OS                : Linux 4.13

Environment Variables:

    ANDROID_HOME : /home/clifford/Android/Sdk

Misc:

    backend : pro

Describe the Bug
ion-refresher pull icon always shows up even at the bottom center page which will only be showed when on the most top part of the page. I am using ion-slides and any slide has an issue when scrolling up. It already shows the refresher even when I am not on the top of the page

Steps to Reproduce
Steps to reproduce the behavior:

1. When I scroll down to see some data base on api request
2. When I finally want to scroll up the pulling icon already shows even in the bottom part or center part of the slide or page which would suppose to be showed at the most top part of the slide or page.
3. ion-refresher gets automatically pulled when scrolling back to top.

Related Code
stackoverflow
stackoverflow2

`

<ion-refresher (ionRefresh)="doRefresh($event)">
  <ion-refresher-content
    pullingIcon="arrow-dropdown"
    refreshingSpinner="crescent">
  </ion-refresher-content>
</ion-refresher>

  <ion-toolbar *ngIf="selectedSegment=='first'" id="fade" class="toolbar-segment">
    <ion-segment class="horizontal-scroll" mode="md" color="community" [(ngModel)]="selectedSegmentCategory" (ionChange)="filterPostsBy($event)">
      <ion-segment-button *ngFor="let category of categories; let i = index" [value]="category.name">
        {{category.name | translate}}
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)" *ngIf="!spinner">

<!--Explore-->
<ion-slide *ngIf="!preloader">
  <ion-scroll scrollY="true">
    <!-- Content 1 here -->
  </ion-scroll>
</ion-slide>

<ion-slide *ngIf="!preloader">
  <ion-scroll scrollY="true">
   <!-- Content 2 here -->
  </ion-scroll>
</ion-slide>

`

Expected Behavior
Pulling icon of the refresher is supposed to show at the most top part of the slide or page. But always shows when scrolling up at the bottom part of the slide or content even at the middle

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[mconti80]

I'm experiencing the same problem on ionic 4

[DavidVinicius]

Same problem here.

[UesleyCarossi]

Same issue, all pull down fired even in the middle.

Ionic:

Ionic CLI : 5.4.1 (C:\Users****\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.7.1
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.2.0
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : not installed
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 25 other plugins)

Utility:

cordova-res : 0.8.1
native-run : 0.2.8

System:

Android SDK Tools : 26.1.1 (C:\Android\sdk)
NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

[dp006]

is there any update for this?

[selahattinsonmez]

Hi,

I think this error sometimes occurs because the refresh event is not over by using;

  refresher.target.complete();

and then every clicks trigger the event again.

You can give time out to your event.

    setTimeout(() => {
      refresher.target.complete();
    }, 2000); 

Use it in doRefresh event handler just like this;

        <ion-refresher #refresher (ionRefresh)="doRefresh($event)" slot="fixed">
            <ion-refresher-content >

            </ion-refresher-content>
        </ion-refresher>

  doRefresh(refresher) {
    setTimeout(() => {
      // make api calls here
      refresher.target.complete();
    }, 2000); //set time out
 }

So if the event is not over by using;

  refresher.target.complete();

Timeout will end it.