zone.js cause "Unable to preventDefault inside passive event listener invocation." "errors", if passive handler is added first

[VolodymyrBaydalka]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

There is issue with zone.js addEventListener patch. If you add listener with { passive: true } options first, same handler will be used for non-passive event listeners. As result calling event.preventDefault() causing error. Code example:

import 'zone.js';

document.addEventListener('mousemove', (ev) => {}, { passive: true });
document.addEventListener('mousemove', (ev) => {
  ev.preventDefault(); // throws error
});

Please provide a link to a minimal reproduction of the bug

Demo - https://js-dtyss2.stackblitz.io/ Code - https://stackblitz.com/edit/js-dtyss2

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

OS: win32 x64
Browser: Chrome 98

@zone.js        0.11.4

Anything else?

No response

[dungtm007]

Is there any update on this issue? I faced the same when using Angular drag and drop SDK. The event is "mouseMove"

[VolodymyrBaydalka]

@dungtm007 had same issue. As hotfix I just register dummy non-passive event handler on start of application, so zone.js reuse it instead of passive one. But yeah, waiting on proper fix.

// dummy handler to fix issue with zone.js
document.addEventListener("mousemove", () => {}, { passive: false, caprute: true });

[dungtm007]

Thanks for sharing @zVolodymyr. Yeah aiming for the same!

[UncleSamSwiss]

Thanks @zVolodymyr for your workaround. There was a little typo, it should be:

// dummy handler to fix issue with zone.js
document.addEventListener("mousemove", () => {}, { passive: false, capture: true });

[fxck]

Encountered this using driver.js, runOutsideAngular doesn't seem to have any effect.

[esnoche]

Thanks @zVolodymyr for your workaround. There was a little typo, it should be:

// dummy handler to fix issue with zone.js
document.addEventListener("mousemove", () => {}, { passive: false, capture: true });

THANKS!!