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

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:

Pull down the page
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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 12
Comments: 36 (5 by maintainers)

Commits related to this issue

fix(refresher): check for cancelable before preventing default (#17351) fixes #15256 Add loading controller vue docs Add ion-tabs support, QOL fixes Fix @ionic/core version, rebuild core to includ... — committed to ModusCreateOrg/ionic by deleted user 5 years ago

Most upvoted comments

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!

liamdebeasi on Mar 1, 2019

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

Jerga99 on Oct 31, 2018

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

nbadiganti on Nov 2, 2018

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

3adeling on Jan 12, 2019

Thanks for confirming it 😃

paulstelzer on Dec 5, 2018

It’s solved for me. It was my fault. Now I have the <ion-refresher-content> 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>

petinho on Oct 21, 2018

I have same problem.

Code:

plebani on Oct 15, 2018