Unable to preventDefault inside passive event listener invocation

[sergeybakhar]

Hi!

Thanks for the awesome slider!

When I click on bullets I get "Unable to preventDefault inside passive event listener invocation" in Chrome.

Can I fix it somehow?

I've read about supporting IE11 ;)

Google Chrome 73.0.

[thezaff]

Hi!

Thanks for the awesome slider!

When I click on bullets I get "Unable to preventDefault inside passive event listener invocation" in Chrome.

Can I fix it somehow?

I've read about supporting IE11 ;)

Google Chrome 73.0.

I am experiencing the same problem on the same Chrome version. Did you find a solution?

[jamesmosier]

This article from Google explains it a bit, but their proposed solution of adding the CSS property touch-action: none to the elements firing the event isn't working. I tried putting this on every single Glide element with no luck. My issue is with the next/previous controls, so in theory putting that style on the button element should fix it but I couldn't get it to work.

Additionally here is a chromium issue that details it a bit more.

[sergeybakhar]

Hi!

Unfortunately, I haven't found a solution. And I've tried 'touch-action' everywhere, but with no luck, too.

[thezaff]

Hi!

Unfortunately, I haven't found a solution. And I've tried 'touch-action' everywhere, but with no luck, too.

This article from Google explains it a bit, but their proposed solution of adding the CSS property touch-action: none to the elements firing the event isn't working. I tried putting this on every single Glide element with no luck. My issue is with the next/previous controls, so in theory putting that style on the button element should fix it but I couldn't get it to work.

Hey!

I have just fixed it on my project. Turns out I've had wrong values for data-glide-dir attribute of buttons (.glide__arrow). I've had prev and next values, but when I changed them to < and > respectively, it worked properly.

I've had this markup:

<div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="prev"></button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir="next"></button>
</div>

Instead, I had to use this markup from glide docs

<div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>

Just alter the data-glide-dir attribute values to < and > if you have prev and next instead.

[jamesmosier]

Hi @thezaff, thanks for the thought. Unfortunately that's already what I had in there for the data-glide-dir attribute.

When testing the demos on the Glide site and using Chrome Dev Tools to emulate a touch device, the error is still present.

[romansh]

The same here with dotted navigation. I have tried a lot of things but without any success.

[viiiprock]

same here

[poldixd]

Same here! Chrome 74

[timtheone]

There is an open PR to fix this issue: https://github.com/glidejs/glide/pull/351. CC: @jedrzejchalubek .

[nicholashamilton]

Looks like their utility located in '../utils/detect-passive-event' is not working. event.preventDeault() should not be called on a passive event listener, which in this case it is.

[gozenc]

Changing line 3249 of glide.js's event.preventDefault(); to event.stopPropagation(); solves the problem for now.

[nicholashamilton]

quick fix for now

const glideBullets = Array.from(this.view.querySelectorAll('.glide__bullet'));

glideBullets.forEach((el) => { el.addEventListener('click', (e) => { e.stopPropagation(); }); });

[Roye7777777]

Although the slider works normally, despite changing event.preventDefault() to event.stopPropagation() and even adding {passive: false} as an option to the function, the error keeps on appearing. It is, however, only in Google Chrome 75 DevTools' device toolbar (for responsive testing). On my phone, I obviously don't get any errors, which would make it seem ok, but it causes other javascript on the page to not function at all instead, which is not ok sorry, I checked it again and I can confirm this doesn't break the rest of the scripts.

[PezCoder]

@jedrzejchalubek @ahukkanen I can see the fix for this issue has been merged in https://github.com/glidejs/glide/pull/351 but it's not available on npm yet.

Is it possible to push a release with appropriate version to npm for all the 21 commits (https://github.com/glidejs/glide/compare/v3.3.0...master) that's been pushed since v3.3.0 ?

[phpMagpie]

Just used the dist folder to pull down latest js files and this fix is not in there either.

[nicklee]

Getting this as well on the latest release

[janbiasi]

Same here ...

[iecorp]

Same here...

[MLDMoritz]

Same here...

[Jucifer]

saaaaame

[idpokute]

same here...

[PezCoder]

I understand the intentions of people doing same here's are right but a suggestion.

You should do +1 reaction 👍on the comment if you find something which works as a fix or resembles your issue because of two reasons:

1. A new comment like these bring unnecessary attention to the thread for the people who has subscribed to the thread
2. 👍 are a way to quickly scan through a thread & know what comments has worked for people & what doesn't, reading through a thread otherwise with tons of same here just makes it complicated

[AbanoubNassem]

probably it's related to same issue here : https://github.com/inuyaksa/jquery.nicescroll/issues/799#issuecomment-482200470 ?

[studiogalaxie]

Hi, the issue still exist. Is there any fix for that problem ?

[gilbertlucas46]

Removing data attributes and manually adding click events works for me.

<div class="glide__arrows">
    <button class="glide__arrow glide__arrow--left"></button>
    <button class="glide__arrow glide__arrow--right"></button>
</div>

const ArrowRight = document.querySelector('.glide__arrow--right');
ArrowRight.addEventListener('click', () => {
  Slider.go('>');
});

const Arrowleft = document.querySelector('.glide__arrow--left');
Arrowleft.addEventListener('click', () => {
  Slider.go('<');
});

[jrmarqueshd]

At ReactJs I was able to solve this by creating a function that makes navigation for me!

I did the following to make it work without the error message: I created a function that handles the navigation of the arrows and bullets

const sliderGoTo = (direction) => {
   this.glide.go(direction);
}

And on the call of events I did the following: Example for calling the next slider

<button onClick={() => sliderGoTo(">")} className="glide__arrow glide__arrow--next">{">"}</button>

Example for calling the next slider through the bullets

<button key={index + ""} className={`glide__bullet ${activeSlider === index ? "glide__bullet--active" : ""}`} onClick={() => sliderGoTo("=" +  index)} />

After that, just remove the date attributes that we passed previously in the control elements.

This is easily replicated in pure JavaScript, in case you need help!

[psdon]

any update?

[Vince-vegas]

The error will show when you open the console but if it's not GlideJs will not throw an error to the console

This would help

[Keither]

i removed this code t.preventDefault() in min file, and working fine (no error Unable to preventDefault inside passive event listener invocation) sorry my english not good!

[karakunai]

After trying some solutions above, in my case with NextJS I found that it would just trigger another bug like this one #371, so I've tried to append these buttons the parent element and set data-glide-dir attribute there manually. Example

const controlParent = createRef()
useEffect(() => {
    let leftControl = document.createElement("button")
    leftControl.setAttribute("class", "glide__arrow glide__arrow--left")
    leftControl.setAttribute("data-glide-dir", "<")
    leftControl.textContent = "prev"
    controlParent.current.appendChild(leftControl)
}, [])

....

and then

<div className="glide__arrows" data-glide-el="controls" ref={controlParent}></div>

I can confirm on my end that there's no error on my dev console with this one. Please have a try and let me know how it performs on your end.

[karakunai]

And I just wanna say Merry Christmas, hopefully we can get some fixes in the near future, because there's no other library like GlideJS... sadge

[AlexaContreras]

Hi guys, I fixed it by changing the glide.esm.js file y node modules line 3243 from event.preventDefault() to event.stopPropagation();

[SelfTaughtCoder78704]

I removed this from the source code: t.preventDefault(), -- take notice of the comma as well. you can find it in the error being logged. App still works -- no errors at all

[Michaelvons]

Hi guys, I fixed it by changing the glide.esm.js file y node modules line 3243 from event.preventDefault() to event.stopPropagation();

If you are using Webpack, remember to restart your dev server after saving the edit

[bastien70]

Maybe a release with the fix ?

[Ayagoumi]

Experiencing the same issue.

[vitorblsantoss]

Has an way to solve the problem? Only happens on mobile...

[sevdas]

Hello, I am also experiencing the same issue, please see below for more details.

As seen on the screenshots it happen to throw an error on preventDefault() and work in stopPropagation() within glide.esm.js folder, however I am not able to fix it permanently. Will glide have an update on it ?

[MilanTearMaras]

Has an way to solve the problem? Only happens on mobile...

Same here! Is there a solution yet?