bug: non-passive event listener for 'touchstart' event

[aparajita]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When loading an Ionic/Vue page with verbose logging on in Brave (which is Chromium-based), the following warning appears:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.
Consider marking event handler as 'passive' to make the page more responsive.
See https://www.chromestatus.com/feature/5745543795965952
enableScrollAssist @ input-shims.js:182
registerInput @ input-shims.js:357

Expected Behavior

No warning should appear.

Steps to Reproduce

git clone https://github.com/aparajita/biometric-auth-demo.git
cd biometric-auth-demo
pnpm install
pnpm dev

• Open localhost:3000
• Open the console
• Turn on verbose logging
• Reload the page
• Look the bottom of the console for a [Violation] warning.

Code Reproduction URL

https://github.com/aparajita/capacitor-biometric-auth-demo

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/Users/aparajita/Library/pnpm/global/5/.pnpm/@Ionic+cli@6.20.1/node_modules/@ionic/cli)

Capacitor:

Capacitor CLI : 3.6.0
@capacitor/android : 3.6.0
@capacitor/core : 3.6.0
@capacitor/ios : 3.6.0

Utility:

cordova-res : 0.15.4
native-run : not installed globally

System:

NodeJS : v18.4.0 (/Users/aparajita/.fnm/node-versions/v18.4.0/installation/bin/node)
npm : 8.12.1
OS : macOS Monterey

Additional Information

No response

[sean-perkins]

Hello @aparajita thanks for the issue! Would it be possible to make the reproduction app a public repository? Thanks!

[sean-perkins]

After some brief discovery, this seems to occur in two areas:

1. With our scroll assist utility and inputs
2. Using onTouchStart={} bindings in ion-input for the clear input behavior.

I'll need to consult with the team + the Stencil team with regards to the touch start binding. Currently there isn't a way to register passive event listeners through JSX bindings. This may be a case where we just manually add an event listener.

[aparajita]

Thanks for taking a look!

[aparajita]

@sean-perkins That repo is public, were you not able to access it?

[sean-perkins]

@aparajita I was not, the link results in a 404. Did you perhaps mean to point to: https://github.com/aparajita/capacitor-biometric-auth-demo?

[aparajita]

Yes, doh! 🫢

[sean-perkins]

Hello @aparajita can you try with this dev-build and let me know if you observe any errors/unexpected changes in behavior and if the warnings are resolved?

6.1.14-dev.11657566839.18ed2481

I did some brief testing in our local reproduction and things appear to be functional. Without problematic behavior outside the warning however, doesn't hurt to have a second set of eyes 👍 Thanks!

[aparajita]

Looks good here, thank you!