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

Bug Report

Ionic version:

[x] 4.11.10

Current behavior:

When an ion-datetime is added into the html and the user interacts with it (either touches it or scrolls through it) the error pops up in the console and does not let the application continue working properly.

Expected behavior:

The user should be able to scroll or touch as desired without affecting the application’s performance.

Steps to reproduce:

  1. Add an ion-datetime to the template of a page.
  2. Run the app (wether on a device or the browser).

Related code:

page.html

<ion-item>
    <ion-label>Date Selector</ion-label>
    <ion-datetime></ion-datetime>
</ion-item>

page.ts

const birthdate = new Date(this.registerForm.value.birthdate);

Other information:

Related issue: #18641

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\myuser\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.1
   @capacitor/core : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
 4.2.1, (and 6 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (D:\Windows\AndroidStudio\bin)
   NodeJS            : v13.2.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.4
   OS                : Windows 10

issue

1 possible answer(s) on “bug: [Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted