Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
VolodymyrBaydalka opened this issue Feb 8, 2022 · 6 comments
Open

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

VolodymyrBaydalka opened this issue Feb 8, 2022 · 6 comments
Assignees
@JiaLiPassion
Labels
area: zones P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Milestone
Backlog

Comments

@VolodymyrBaydalka
Copy link

VolodymyrBaydalka commented Feb 8, 2022 •
edited
Loading

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
@ngbot ngbot bot added this to the needsTriage milestone Feb 8, 2022
Zuckjet added a commit to Zuckjet/angular that referenced this issue Feb 10, 2022
@Zuckjet
fix(zone.js): fix addEventListener behavior when passive option is en…
1a7b875 
…abled

This fix the inconsistent behavior when multiple identical eventListeners are registered on the same eventTarget with passive enabled

Close angular#45020
@Zuckjet Zuckjet mentioned this issue Feb 10, 2022
Closed
14 tasks
Zuckjet added a commit to Zuckjet/angular that referenced this issue Feb 10, 2022
@Zuckjet
fix(zone.js): fix addEventListener behavior when passive option is en…
1f19175 
…abled

This fix the inconsistent behavior when multiple identical eventListeners are registered on the same eventTarget with passive enabled

Close angular#45020
@JiaLiPassion JiaLiPassion self-assigned this Feb 11, 2022
@nobilo nobilo mentioned this issue Mar 17, 2022
Closed
@dungtm007
Copy link

dungtm007 commented Apr 12, 2022 •
edited
Loading

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

@VolodymyrBaydalka
Copy link
Author

@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
Copy link

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

@UncleSamSwiss
Copy link

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 });

@alxhub alxhub added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Nov 16, 2022
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Nov 16, 2022
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Mar 19, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
ebf8c88 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
@JiaLiPassion JiaLiPassion mentioned this issue Mar 19, 2023
Closed
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Mar 19, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
2d51ab3 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Mar 19, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
35b973b 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Mar 25, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
5437afa 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Mar 25, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
a45dd8d 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Mar 25, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
13247d7 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
@wslaghekke wslaghekke mentioned this issue Sep 11, 2023
Closed
@Talb2005 Talb2005 mentioned this issue Sep 13, 2023
Open
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Dec 14, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
f18202b 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Dec 14, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
1fe53a0 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Dec 14, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
59d44f0 
Close angular#45020
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Dec 15, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
320ff96 
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.

PR closes angular#45020
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Dec 16, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
1cadb57 
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.

PR closes angular#45020
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Dec 18, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
8caae4f 
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.

PR closes angular#45020
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Dec 18, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
f174766 
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.

PR closes angular#45020
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Dec 18, 2023
@JiaLiPassion
fix(zone.js): should allow add passive/non-passive listeners together
6860a6e 
In the current version, if we add both `passive` and `not passive` listeners for the
same eventName together, they will be registered with all passive or all non passive
listeners depends on the order.

```
import 'zone.js';
div1.addEventListener('mousemove', (ev) => {}, { passive: true });
div1.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // throws error since this one is also be registered as a passive event handler
});

div2.addEventListener('mousemove', (ev) => {
});
div2.addEventListener('mousemove', (ev) => {
ev.preventDefault(); // will not throw error since this one is also be registered as non passive event handler
}, { passive: true });

```
So this PR fix this issue and allow both passive and non-passive listeners registeration
together whatever the order.

PR closes angular#45020
@fxck
Copy link

fxck commented Jan 25, 2024

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

This was referenced Apr 24, 2024
Closed
Open
@esnoche
Copy link

esnoche commented Jun 14, 2024

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!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@JiaLiPassion JiaLiPassion

Labels
area: zones P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
Backlog
8 participants
@fxck @JiaLiPassion @VolodymyrBaydalka @alxhub @dylhunn @UncleSamSwiss @dungtm007 @esnoche