Skip to content

HostListener on specific keys negates effect of ngZoneEventCoalescing #45698

@bene-starzengruber

Description

@bene-starzengruber

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

core

Is this a regression?

No

Description

We can use ngZoneEventCoalescing to group change detection cycles of events into an animationFrame
So if we have a listener like this on a component that appears multiple times in the dom

  @HostListener('document:keydown', ['$event'])
  onKeydown(event: KeyboardEvent) {
    ...
  }

there is only one change detection cycle triggered on each keydown event

but if we now specify the key, we loose this effect and there is one change detection cycle per component

  @HostListener('document:keydown.a')
  onKeydown() {
    ...
  }

I've provided a stackblitz link with both variations in the BoxComponent and added logging for the change detection cycles to the console.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-qza2cj?file=src%2Fmain.ts

Please provide the exception or error you saw

No response

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

No response

Anything else?

I guess the key event manager plugin causes the cycles here

static eventCallback(fullKey: any, handler: Function, zone: NgZone): Function {
return (event: any /** TODO #9100 */) => {
if (KeyEventsPlugin.getEventFullKey(event) === fullKey) {
zone.runGuarded(() => handler(event));
}
};
}

if we activate the ngZoneRunCoalescing flag as well, then we have the desired behaviour again.
the question is if the event plugin should be modified so that it already applies to the ngZoneEventCoalescing flag like one would expect from the name.

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functionsarea: coreIssues related to the framework runtimearea: zonesIssues related to zone.jsbug

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions