[IONIC 4] Ignored attempt to cancel a touchmove event with cancelable=false,

[wenisy]

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

   ionic (Ionic CLI)          : 4.1.0
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.5
   @ionic/schematics-angular  : 1.0.4

Describe the Bug

I add a tap event on ion-item, and to make it could scroll I also add [style.touch-action]="'pan-y'" to make it work.

Pull down to refresh the page, there is a error in console. [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Steps to Reproduce Steps to reproduce the behavior:

1. Pull down the page
2. Check console, you could get the error.

Related Code

<ion-content>
    <ion-refresher>
    </ion-refresher>
    <ion-list>
        <ion-item (tap)="xxxx()" `[style.touch-action]="'pan-y'">
    </ion-list>
</ion-content>

Expected Behavior No error in console.

Additional Context

[akkitheakhil]

I have the same issue. Also getting an error "refresher.complete is not a function" any solution to this ?

[wenisy]

@akkitheakhil still waiting...

If you get any solution of this, could you please write it down here?

[RHinderiks]

Same here

[copaste]

I have the same issue.

[Silvest89]

Having it here as well

ionic (Ionic CLI) : 4.1.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.0.0-beta.8 @angular-devkit/core : 0.8.1 @angular-devkit/schematics : 0.8.1 @angular/cli : 6.2.1 @ionic/ng-toolkit : 1.0.8 @ionic/schematics-angular : 1.0.6

[babaru]

Guys, please check Ionic 4 beta docs: https://beta.ionicframework.com/docs/api/refresher

[wenisy]

Guys, please check Ionic 4 beta docs: https://beta.ionicframework.com/docs/api/refresher @babaru

Sorry, I didn't get your point.

You mean we should add

setTimeout(() => {
      console.log('Async operation has ended');
      event.target.complete();
    }, 2000);

In doRefresh function?

I have done that, but still have this issue.

[natalieG96]

+1

[plebani]

I have same problem.

Code:

[petinho]

Same problem here!

[kelvinjp]

+1

[petinho]

It's solved for me. It was my fault. Now I have the element empty. The component is working and there's no error on the console. My code:

<ion-content padding>
  <ion-refresher  (ionRefresh)="doRefresh($event)">
        <ion-refresher-content>          
        </ion-refresher-content>
  </ion-refresher>
  <ion-card *ngFor="let ticket of currentTickets">
    <ion-card-header>
      {{ticket.Title}}
    </ion-card-header>
    <ion-card-content>
      <div>{{ticket.Description}}</div>
    </ion-card-content>
  </ion-card>
</ion-content>

[Jerga99]

I am still having this issue. Is there any known fix ?

[nbadiganti]

Still issue persists in the latest ionic version. Any known fix or turn around solution?

[Riyaz0001]

same problem here. ionic Info: `Ionic:

ionic (Ionic CLI) : 4.3.1 (C:\Users\Riyaz\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 4.0.0-beta.15 @angular-devkit/build-angular : 0.8.7 @angular-devkit/schematics : 0.8.7 @angular/cli : 6.2.7 @ionic/angular-toolkit : 1.1.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 11 other plugins)

System:

NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe) npm : 5.6.0 OS : Windows 10`

[sashayello]

Same problem. Have some idea to fix this?

[sneko]

Up. Same error for me

[ashvinmay]

same problem any idea to fix

[XieGuoJuan]

Is there a solution?

[paulstelzer]

This is still not working with beta.17?

[KevinKelchen]

I'm not the OP, but FWIW, I still see the error with Beta 17 in our application.

[paulstelzer]

Thanks for confirming it :)

[kharatps02]

same issue for us. waiting for fix.

[paulstelzer]

It would be great if someone can create a repo for that so we can see the console error log :)

[LautaroLorenz]

same issue

[KevinKelchen]

Here you go, @paulstelzer.

Steps to Reproduce

1. Clone this repo on your machine: https://github.com/KevinKelchen/ionic4-refresher-error . It is a very slightly modified version of the blank Angular starter template. The only substantial change is adding the ion-refresher. It is on Beta 19.
2. In the terminal, path into the repo root and run npm i.
3. Run ionic serve.
4. Open the Google Chrome Dev Tools so you can see both the Dev Tools Console as well as the running application.
5. Pull down on the text content ("The world is your oyster. ...") and it will reveal the refresher.
   • Note: You will need to reload the browser window after the refresh loading spinner appears if you want to try the refresher again. This is a pretty simple sample.
6. If you pull down at a slower/moderate rate, you will see one or more instances of the error in the console:

[avuenja]

same issue here

edit I don't know if it helps you, but, I fixed the error in my code, adding async to the called functions in my doRefresh and removed the reset of the variables.

[sivadinesh1]

Had same error. fixed the error by removing async in doRefresh method. there was two async in doRefresh and in calling http client api

[xiaoxiao95888]

same error

[BassamHabash]

Hi All, For resolving the complete in not a function, add a variable reference to html <ion-refresher #refresherRef slot="fixed" (ionRefresh)="doRefresh($event)">

and in .ts add : @ViewChild('refresherRef') refresherRef;

doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      this.refresherRef.complete();
    }, 2000);
  }

and for that error, I have add content empty:

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

and that work for me.

[3adeling]

I am getting the same error and it is causing me another problem. check my post:

https://forum.ionicframework.com/t/video-refresher-gets-triggered-when-scrolling-down/152807

for my case, I noticed that when I pull the refresher gently and slowly the problem is gone and scroll works fine.

to generate the scrolling issue:

• pull the refresher and let it go up by itself.
• scrolling down won't work, instead it will call the doRefresh function.

to avoid the scrolling issue:

• pull the refresher gently and slowly until the 'up' arrow appears
• release it.
• scrolling works fine

[mtshare]

Same here +1

[sivadinesh1]

Same error in latest build too +1

[liamdebeasi]

Hi everyone,

This has been resolved via #17351 and will be in the next release of Ionic. I have published a nightly build with this fix if anyone would be interested in testing with their apps (4.1.0-dev.201903011951.f205b10). Thanks!

[rafalschmidt97]

Issue still exists. I get this only on android (for example while moving slider). Never on ios.

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 8.0.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 10 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/rafalschmidt/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[liamdebeasi]

Hi there,

This issue is related to the touchmove event on the refresher component. For anything outside of that, please create a new issue.

Thanks!