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

[LuisMiguelSS]

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

[liamdebeasi]

Thanks for the issue. This was fixed in Ionic Framework v5.1.0.

[LuisMiguelSS]

Upgraded to Ionic v5.4.16 and still happening.

[liamdebeasi]

Ionic Framework v5.4.16 does not exist. You likely upgraded the Ionic CLI instead.

To upgrade to the latest version of Ionic Framework, run npm install @ionic/angular@latest.

[LuisMiguelSS]

Oops, my fault, still the issue persists on @ionic/angular 5.1.1 with the same steps to reproduce.
Output from ionic info:

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.1.1
   @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 : android 8.1.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 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.5
   OS                : Windows 10

Edit: may it be related to the way I'm testing? (ionic cordova emulate android --device --debug)

[liamdebeasi]

Can you clarify your steps to reproduce? I am testing this on Chrome 83 and am unable to reproduce the issue you are seeing.

[LuisMiguelSS]

Sure, I'm running the tests on a physical Android 10.
Command used: ionic cordova emulate android --device --debug.

Whenever I click and drag in order to select a date, no matter if done fast, slow or just clicked, the error shows on the chrome browser and keeps showing if I'm long pressing until I release it.

This doesn't seem to reproduce either on Firefox 77.x

[liamdebeasi]

If you were to use Chrome DevTools to inspect the app running on the device, what does it say when you log window.navigator.userAgent to the console?

[LuisMiguelSS]

It displays:
"Mozilla/5.0 (Linux; Android 10; Mi 9 Lite Build/QKQ1.190828.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.96 Mobile Safari/537.36"

[liamdebeasi]

I tested this out on a physical Android device running Chrome 83 and was still unable to reproduce the issue. Can you provide a repo with code I can use to reproduce the issue?

[LuisMiguelSS]

Sure, will do tomorrow morning.

[ionitron-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.