Ionic-framework: bug: Ionic picker - Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

[REPTILEHAUS]

Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 8.0.0, ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/reptilehaus/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 8.0.1
   NodeJS            : v8.15.1 (/usr/local/Cellar/node@8/8.15.1/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

Getting this error in the console:

[Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Code to repro:

constructor(private pickerCtrl: PickerController) { }

  async showBasicPicker() {
    let opts: PickerOptions = {
      buttons: [{
          text: 'Cancel',
          role: 'cancel'
        },{
          text: 'Done'
        }],
      columns: [
        {
          name: 'distance',
          options: this.distances // declared above
        }
      ]
    };
    let picker = await this.pickerCtrl.create(opts);
    picker.present();

    picker.onDidDismiss().then( data => {
      picker.getColumn('distance').then( col => {
        this.selectedDistance = col.options[col.selectedIndex].value;
      })
      // maybe remove the text field from the distances so that we can allow for miles

    });

I think its related to this issue with datetime, seems to be global issue with any scrolling component https://github.com/ionic-team/ionic/issues/16630

[sistla001]

Any update on this issue? I am still having the same issue.

[auron105]

opts add cssClass: 'open_picker'

global.scss add
.open_picker {
touch-action: none;
}

it work for me!

[tnishimura]

I get this exact same error message in the console when I use IonDatetime, and attempt to scroll to rapidly or move one scroll (say, the month) while the year is still scrolling, etc. ionic/react version 4.11.7 developing on chrome. Ubuntu 18.04.

[aaadipop]

Any updates? :)

[etonyali]

This is still an issue.

[netsesame2]

@auron105
cssClass: 'open_picker' not works now.

current workaround is:
//globa.scss

ion-picker {
    touch-action: none;
}

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21038, and a fix will be available in an upcoming release of Ionic Framework.

[pascalkania]

hey, i still get the error when using IonDatetime in version @ionic/[email protected].
i checked the changelog and it should be fixed in the version.

[liamdebeasi]

@pascalkania Please open a new issue with a code reproduction we can look at. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.