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

JokerMartini · 2022-03-16T13:20:56Z

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?

Create a new project with cli
Run the project in dev electron
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 · 2022-03-16T13:21:18Z

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 · 2022-03-16T15:04:51Z

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 · 2022-03-16T18:41:43Z

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 · 2022-03-23T14:42:32Z

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: #12385
And @rstoenescu solved it with this commit: 672ed26

I believe it then generated this bug.

pdanpdan · 2022-03-23T15:05:16Z

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

philippedasilva-orizone · 2022-03-23T16:21:18Z

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 · 2022-03-23T16:29:37Z

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

philippedasilva-orizone · 2022-03-23T17:07:48Z

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 · 2022-03-23T18:15:11Z

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

pdanpdan · 2022-03-23T19:00:21Z

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 · 2022-03-25T08:28:43Z

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

pdanpdan · 2022-03-25T21:14:38Z

In here:

quasar/ui/src/components/btn/QBtn.js

Line 87 in 4a52a37

onTouchstart

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

philippedasilva-orizone · 2022-03-27T01:23:46Z

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 · 2022-04-21T09:50:57Z

Definitely related to the q-btn

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

JokerMartini · 2022-04-21T21:04:38Z

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

Sfinx · 2022-05-12T12:28:05Z

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

thomas-topway-it · 2022-06-10T22:37:18Z

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 · 2022-08-10T20:39:17Z

Guys, could you fix it?)

RobbeVorsselmans · 2022-09-14T21:54:09Z

I'm still having this same problem...

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

Sazzels · 2022-09-17T07:31:38Z

I am also experiencing this warning.

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

Carleslc · 2022-09-22T19:23:54Z

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

* feat(touch events): use passive mode in more cases #12822 * Update TouchPan.js * Update TouchSwipe.js Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>

rstoenescu · 2022-10-01T08:08:53Z

Fixed in cb2c64d for Qv2.

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

RobbeVorsselmans · 2022-10-01T13:53:30Z

Thanks a lot!

fardolieri · 2023-01-11T13:35:25Z

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

imvenx · 2023-02-08T11:02:13Z

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 · 2023-02-08T11:07:10Z

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

imvenx · 2023-02-08T11:10:40Z

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 · 2023-02-08T11:12:53Z

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 · 2023-02-08T11:15:25Z

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.

pdanpdan · 2023-02-08T11:28:12Z

You mean you want the button to be still active while loading? Then just replace the content with a loading indicator

imvenx · 2023-02-08T11:31:51Z

You mean you want the button to be still active while loading? Then just replace the content with a loading indicator

I mean exactly what OP means but for loading

pdanpdan · 2023-02-08T11:34:58Z

To summarize:

if you want the button in loading state to not be active then the listeners must be not-passive (quasar behavior for l ii adding prop)
if you want a button that is active but shows a loading indicator then change the content of the button to show a loading indicator

imvenx · 2023-02-08T11:39:19Z

To summarize:

* if you want the button in loading state to not be active then the listeners must be not-passive (quasar behavior for l ii adding prop)

* if you want a button that is active but shows a loading indicator then change the content of the button to show a loading indicator

idk what you mean, If I create literally a <q-btn loading /> component I get this warning, to me that looks like a bug, it should be a way to at least do loading.passive

imvenx · 2023-02-08T18:22:31Z

To summarize:

* if you want the button in loading state to not be active then the listeners must be not-passive (quasar behavior for l ii adding prop)

* if you want a button that is active but shows a loading indicator then change the content of the button to show a loading indicator

btw I did the button with a spinner inside on v-slot and still get warning message, idk if that's what you were saying, the only way to get around it is to do v-if/else with spinner instead of using loading, but that defeats the whole point of having a loading prop.

pdanpdan · 2023-02-08T20:13:33Z

Don't use the loading prop - use your own way to determine if it is loading
Make a codepen, please

imvenx · 2023-02-08T21:04:06Z

Don't use the loading prop - use your own way to determine if it is loading Make a codepen, please

Forgot to mention that this bug only happens on electron, so can't make codepen

Error in question is "Violation error Added non-passive event listener to a scroll-blocking", bug: quasarframework/quasar#12822

Download · 2024-05-22T08:04:29Z

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.

If you need the event to be non-passive, indicate so using the third parameter (set it to true I think). The warning is not about not using passive event handler, but about not using the third parameter to specify whether the event handler is passive or not. If you don't specify the third parameter, the browser will assume the event is non-passive and print this warning. If you specify the third parameter, the warning will disappear.

Download · 2024-05-22T08:09:32Z

Getting this warning with Quasar

"quasar": "^2.16.4",
"nuxt-quasar-ui": "^2.1.2",

On a MacBook Pro

JokerMartini added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Mar 16, 2022

github-actions bot added area/cli bug/0-needs-info Need more info to reproduce flavour/quasar-cli-webpack mode/electron labels Mar 16, 2022

smolinari added flavour/quasar-cli-vite mode/spa mode/electron flavour/quasar-cli-webpack and removed flavour/quasar-cli-webpack mode/electron mode/spa flavour/quasar-cli-vite labels Mar 16, 2022

pdanpdan added a commit to pdanpdan/quasar that referenced this issue Sep 23, 2022

feat(touch events): use passive mode in more cases quasarframework#12822

ac0e073

This was referenced Sep 23, 2022

feat(touch events): use passive mode in more cases #12822 #14474

Merged

feat(touch events): use passive mode in more cases #12822 #14475

Closed

pdanpdan added a commit to pdanpdan/quasar that referenced this issue Sep 30, 2022

feat(touch events): use passive mode in more cases quasarframework#12822

4f5f067

pdanpdan added a commit to pdanpdan/quasar that referenced this issue Sep 30, 2022

feat(touch events): use passive mode in more cases quasarframework#12822

98b48cf

rstoenescu closed this as completed Oct 1, 2022

gpizzorno added a commit to DALME/DALME-Online-Database that referenced this issue May 29, 2023

added code to work around known Quasar bug

6a5471a

Error in question is "Violation error Added non-passive event listener to a scroll-blocking", bug: quasarframework/quasar#12822

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

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

Comments

JokerMartini commented Mar 16, 2022

What happened?

What did you expect to happen?

Reproduction URL

How to reproduce?

Flavour

Areas

Platforms/Browsers

Quasar info output

Relevant log output

Additional context

github-actions bot commented Mar 16, 2022

robfordww commented Mar 16, 2022

MilosPaunovic commented Mar 16, 2022

philippedasilva-orizone commented Mar 23, 2022

pdanpdan commented Mar 23, 2022

philippedasilva-orizone commented Mar 23, 2022

pdanpdan commented Mar 23, 2022

philippedasilva-orizone commented Mar 23, 2022

JokerMartini commented Mar 23, 2022

pdanpdan commented Mar 23, 2022

philippedasilva-orizone commented Mar 25, 2022

pdanpdan commented Mar 25, 2022

philippedasilva-orizone commented Mar 27, 2022

robert-hoffmann commented Apr 21, 2022

JokerMartini commented Apr 21, 2022

Sfinx commented May 12, 2022

thomas-topway-it commented Jun 10, 2022

209 commented Aug 10, 2022

RobbeVorsselmans commented Sep 14, 2022

Sazzels commented Sep 17, 2022

Carleslc commented Sep 22, 2022

rstoenescu commented Oct 1, 2022

RobbeVorsselmans commented Oct 1, 2022

fardolieri commented Jan 11, 2023

imvenx commented Feb 8, 2023 • edited Loading

pdanpdan commented Feb 8, 2023

imvenx commented Feb 8, 2023 • edited Loading

pdanpdan commented Feb 8, 2023

imvenx commented Feb 8, 2023 • edited Loading

pdanpdan commented Feb 8, 2023

imvenx commented Feb 8, 2023

pdanpdan commented Feb 8, 2023

imvenx commented Feb 8, 2023 • edited Loading

imvenx commented Feb 8, 2023 • edited Loading

pdanpdan commented Feb 8, 2023

imvenx commented Feb 8, 2023

Download commented May 22, 2024

Download commented May 22, 2024

imvenx commented Feb 8, 2023 •

edited

Loading

imvenx commented Feb 8, 2023 •

edited

Loading

imvenx commented Feb 8, 2023 •

edited

Loading

imvenx commented Feb 8, 2023 •

edited

Loading

imvenx commented Feb 8, 2023 •

edited

Loading