Vue-carousel: Does not use passive listeners

[Yalm]

Does not use passive listeners to improve scrolling performance
if you add {passive: true} the problem is fixed

this.$refs["VueCarousel-wrapper"].addEventListener( this.isTouch ? "touchstart" : "mousedown", this.onStart,{passive: true} );

[jousi592]

Yeah I am also getting this issue when running the lighthouse check.

When I add it to mounted() like so:

mounted() {
 // adding passive linter to vue-carousel
 this.$refs["VueCarousel"].$refs["VueCarousel-wrapper"].addEventListener( this.isTouch ? 
    "touchstart" : "mousedown", this.onStart, { passive: true });
 },

It gets added, but the lighthouse tool still doesnt see it, is there something wrong with how I am adding it?

Could this perhaps be added natively in the new release?

UPDATE:

I found that I need to do this:

 const touch = this.$refs["VueCarousel"].isTouch
 const onStart = this.$refs["VueCarousel"].onStart
 this.$refs["VueCarousel"].$refs["VueCarousel-wrapper"].removeEventListener( touch ? "touchstart" : "mousedown", onStart, { passive: true });
 this.$refs["VueCarousel"].$refs["VueCarousel-wrapper"].addEventListener( touch ? "touchstart" : "mousedown", onStart, { passive: true });

To be able to change the passive to true.

However, since its being done in mounted, it seems like its too late for Lighthouse to detect it. So I not sure right now, what could mitigate this issue.

UPDATE 2:

After some trial and error, I just had to copy the src of vue-carousel into my project, add the { passive: true } to the event listeners and link it to my components from there.
No other way around it...

[quinnlangille]

@jousi592 we have a PR up right now addressing this, will let you know when it's released

[mauriciokruger]

Hi!, @quinnlangille I'm using the version vue-carousel v0.18.0-alpha and the audits sends the following warning: Does not use passive listeners to improve scrolling performance.

Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance. Learn more: https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

Maybe this is what you are addressing?

[quinnlangille]

Hey @mauriciokruger, thanks for the heads up! We've added a utility to centralize events (and flag them as passive) that we haven't rolled out to all events yet. It will be a super easy fix, so should be done soon!

[NTpspE]

I'm noticing this issue also. I can see #411 open for this but that was 3 months ago now, any chance on an update? 😄

[matthew-inamdar]

Interested in this feature too, is there any update since August?

[mjkhonline]

@jousi592 we have a PR up right now addressing this, will let you know when it's released

Hi. is there any update?