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[email protected]/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!

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