fix(core): Account for addEventListener to be passed a Window or Document. (angular#57282)

This happened to work for other event listeners since both had a addEventListener method. PR Close angular#57282

Author: iteriani

packages/core/src/event_delegation_utils.ts

@@ -93,15 +93,25 @@ export class GlobalEventDelegation implements OnDestroy {
  return isEarlyEventType(eventType);
  }
 
- addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
- this.eventContractDetails.instance!.addEvent(eventName);
- sharedStashFunction(element, eventName, handler);
- getActionCache(element)[eventName] = '';
- return () => this.removeEventListener(element, eventName, handler);
+ addEventListener(element: HTMLElement, eventType: string, handler: Function): Function {
+ // Note: contrary to the type, Window and Document can be passed in
+ // as well.
+ if (element.nodeType === Node.ELEMENT_NODE) {
+ this.eventContractDetails.instance!.addEvent(eventType);
+ getActionCache(element)[eventType] = '';
+ sharedStashFunction(element, eventType, handler);
+ } else {
+ element.addEventListener(eventType, handler as EventListener);
+ }
+ return () => this.removeEventListener(element, eventType, handler);
  }
 
  removeEventListener(element: HTMLElement, eventType: string, callback: Function): void {
- getActionCache(element)[eventType] = undefined;
+ if (element.nodeType === Node.ELEMENT_NODE) {
+ getActionCache(element)[eventType] = undefined;
+ } else {
+ element.removeEventListener(eventType, callback as EventListener);
+ }
  }
 }
 

packages/core/test/event_dispatch/event_dispatch_spec.ts

@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Renderer2, inject, ɵprovideGlobalEventDelegation} from '@angular/core';
+import {
+ Component,
+ HostListener,
+ Renderer2,
+ inject,
+ ɵprovideGlobalEventDelegation,
+} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 function configureTestingModule(components: unknown[]) {
@@ -216,5 +222,31 @@ describe('event dispatch', () => {
  bottomEl.click();
  expect(onClickSpy).toHaveBeenCalledTimes(2);
  });
+ it('should allow host listening on the window', async () => {
+ const onClickSpy = jasmine.createSpy();
+ @Component({
+ standalone: true,
+ selector: 'app',
+ template: `
+ <div id="top">
+ <div id="bottom"></div>
+ </div>
+ `,
+ })
+ class SimpleComponent {
+ renderer = inject(Renderer2);
+ destroy!: Function;
+ @HostListener('window:click', ['$event.target'])
+ listen(el: Element) {
+ onClickSpy();
+ }
+ }
+ configureTestingModule([SimpleComponent]);
+ fixture = TestBed.createComponent(SimpleComponent);
+ const nativeElement = fixture.debugElement.nativeElement;
+ const bottomEl = nativeElement.querySelector('#bottom')!;
+ bottomEl.click();
+ expect(onClickSpy).toHaveBeenCalledTimes(1);
+ });
  });
 });