Violation error Added non-passive event listener to a scroll-blocking

[JokerMartini]

What happened?

Created a new project and noticed that it produces tons of errors 'Added non-passive event listener to a scroll-blocking'. I'm not sure why this would be. I'm using the latest version of quasar for this project as of today it's the latest.

What did you expect to happen?

I dont expected to see so many errors.

Reproduction URL

Not applicable

How to reproduce?

1. Create a new project with cli
2. Run the project in dev electron
3. Check chrome console

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), Electron Mode

Platforms/Browsers

Electron

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @JokerMartini! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[robfordww]

I can confirm the same issue on a pretty new and basic app: » Dev mode............... spa » Pkg quasar............. v2.6.0 » Pkg @quasar/app-vite... v1.0.0-beta.3 » Browser target......... edge99|chrome99

[MilosPaunovic]

Might come in handy:

https://chromestatus.com/feature/5745543795965952 https://rbyers.github.io/scroll-latency.html https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

[philippedasilva-orizone]

Hi, I'm getting this same issue and its repro is so simple to see: just open QBtn component page in the official Quasar documentation and you'll see a bunch of them in the console (verbose required).

From my quick research, I believe it has been introduced after this bug was reported: https://github.com/quasarframework/quasar/issues/12385 And @rstoenescu solved it with this commit: https://github.com/quasarframework/quasar/commit/672ed26b5632c10b25a68b2d1f3c8e7b101dc0fe

I believe it then generated this bug.

[pdanpdan]

So many comments and not even one that specifies OS/Browser + version

[philippedasilva-orizone]

So many comments and not even one that specifies OS/Browser + version

In my case, I noticed it on my Macbook Air M1 running MacOS Monterey 12.3 on Chrome 99.0.4844.74

[pdanpdan]

Because I cannot reproduce it on chrome dev on Linux and windows. And on desktops it should not listen for touch events.

[philippedasilva-orizone]

Because I cannot reproduce it on chrome dev on Linux and windows. And on desktops it should not listen for touch events.

I'm sorry but I just tried on Chrome 99.0.4844.82 on Windows (11) and I get the same warnings on the console (make sure to enable Verbose logging in the console to see them). If not, try a quick full refresh on the page as sometimes, I noticed that on first load, they do not appear somehow...

[JokerMartini]

I get this on windows desktop Operating System - Windows_NT(10.0.19042) - win32/x64 NodeJs - 14.17.0

[pdanpdan]

Ok, I found it, it's just on Qv2 because on Qv1 the listener is only attached when the device has touch.

But this is just a cosmetic difference, the main problem is that in order to allow preventing the touch event the listener must not be passive.

Maybe a way would be to check if there is a listener attached on QBtn and only the use non passive.

[philippedasilva-orizone]

Hi @pdanpdan could you point out where we should look at in the code so we can eventually submit a PR ? ;) thanks

[pdanpdan]

In here: https://github.com/quasarframework/quasar/blob/4a52a371e23a6519afe962f422068b4c7f715e39/ui/src/components/btn/QBtn.js#L87

But I don't understand the root cause of the problem, because in Qv1 I don't get the warnings.

[philippedasilva-orizone]

I don't know either but I strongly believe it is related to the commit I mentioned previously in order to solve a bug: it seems to me that it shows that we are replacing OnTouchstartPassive to OnTouchstart

[robert-hoffmann]

Definitely related to the q-btn

All pages that have a q-btn produce this error upon display

[JokerMartini]

Yeah this error still exists in all quasar projects i've been creating

[Sfinx]

Same here, Desktop Ubuntu 20.04 (no touch there !) , Chrome 101.0.4951.64 (Official Build) (64-bit), Quasar v2.6.6

[jaredthirsk]

Ditto: Brave 1.38.119, Chromium 101.0.4951.67, Windows 10, desktop with a touchscreen

• Quasar v2.7.1
• app-webpack 3.5.3

And on desktops it should not listen for touch events.

What about desktops with touch screens ;)

[thomas-topway-it]

I'm also experiencing this error, on desktop, Linux, Quasar v2.7.1, it shows up only when the component/app is updated, not on loading, this could be related to the following piece of code

const onEvents = computed(() => {
  if (props.loading === true) {
    return {
      onMousedown: onLoadingEvt,
      onTouchstartPassive: onLoadingEvt,
      onClick: onLoadingEvt,
      onKeydown: onLoadingEvt,
      onKeyup: onLoadingEvt
    }
  }

  if (isActionable.value === true) {
    return {
      onClick,
      onKeydown,
      onMousedown,
      onTouchstart
    }
  }

(QBtn.js)

[209]

Guys, could you fix it?)

[RobbeVorsselmans]

I'm still having this same problem...

Windows 10 Pro, no touchscreen, node v16.15.1, quasar v2.7.7

[Sazzels]

I am also experiencing this warning.

"node_modules/quasar": {
      "version": "2.8.3"

[Carleslc]

Same warnings in my Macbook Pro 2016, macOS Monterey 12.5.1, Chrome 104.0.5112.101 SPA quasar v2.8.3

[rstoenescu]

Fixed in https://github.com/quasarframework/quasar/commit/cb2c64dfb8518c6c03c5463d454f1b1eed5b0aec for Qv2.

Fix will be available in v2.8.5 and v1.21.0

[RobbeVorsselmans]

Thanks a lot!

[fardolieri]

Looks like this warning is still showing up whenever a QBtn with a loading prop is clicked. Is this expected?

[imvenx]

Looks like this warning is still showing up whenever a QBtn with a loading prop is clicked. Is this expected?

Having same problem :loading prop is still giving warning.. in the meanwhile, any workaround that don't involve v-if/v-else?

Fixed in cb2c64d for Qv2.

Fix will be available in v2.8.5 and v1.21.0

[pdanpdan]

You know, there are situations when that warning means exactly what it says.

[imvenx]

You know, there are situations when that warning means exactly what it says.

? It should be a way to set :loading event to passive

[pdanpdan]

It's a warning to check if what you did has a reason or not (in this case adding a non passive listener). And if you need to prevent default you need non passive

[imvenx]

It's a warning to check if what you did has a reason or not (in this case adding a non passive listener). And if you need to prevent default you need non passive

yes, we need a way to set that event to passive, no point on having non passive loading event on btn by default.