Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rheostat events are calling preventDefault where the events are not marked with passive=false

See original GitHub issue

🐛 Bug description

🔍 Bug reproduction

I am getting a browser intervention report:

  "id": "PreventDefaultPassive",
  "columnNumber": 190798,
  "lineNumber": 2,
  "message": "Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080",
  "sourceFile": "https://steamdb.info/static/js/vendor/algolia-instantsearch.js?v=0a1645e134c5aee5"

From a cursory look, it looks like touch events in components/Slider/Rheostat.js are being cancelled. Chrome made these events passive by default: https://developers.google.com/web/updates/2017/01/scrolling-intervention

Environment

OS: Windows 10
Browser: Chrome 88
Version: 4.10.0

Issue Analytics

State:
Created 3 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

xPawcommented, Jan 25, 2021

Are touch events going to be used in IE11 tough? There’s likely a way to feature detect whether options param can be passed.

0reactions

Haroenvcommented, Dec 19, 2022

This issue is a duplicate of #2578

Top Results From Across the Web

Easy fix for: Unable to preventDefault inside passive event ...

The preventDefault() call can't be used in a passive event listener. ... Mark the event listener not the be passive (not recommended).

Event.preventDefault() - Web APIs | MDN

Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation ...

Unable to preventDefault inside passive event listener

In plain JS add { passive: false } as third argument document.addEventListener('wheel', function(e) { e.preventDefault(); doStuff(e); }, { passive: false });.

JavaScript eventing deep dive - web.dev

↜ This requires calling addEventListener() with { passive: false } . document + "keydown" event: preventDefault() for this combination is ...

184250 – Unable to call event.preventDefault in dynamically ...

In the linked examples, I see the main problem being that we explicitly mark mousemove events as being not cancelable: MouseEvent::create bool ...