refactor(core): Allow manual renderer listens to contribute to event delegation as well. (#56799)

iteriani · atscott · commit 3664cd6cb2cd · 2024-07-19T13:42:26.000-07:00
There are existing usages that inject the renderer to manualy listen (often for event delegation purposes). These should contribute as well. PR Close #56799
diff --git a/packages/core/src/event_delegation_utils.ts b/packages/core/src/event_delegation_utils.ts
@@ -46,7 +46,7 @@ export function setJSActionAttributes(nativeElement: Element, eventTypes: string
   nativeElement.setAttribute(Attribute.JSACTION, `${existingAttr ?? ''}${parts}`);
 }
 
-export const sharedStashFunction = (rEl: RElement, eventType: string, listenerFn: () => void) => {
+export const sharedStashFunction = (rEl: RElement, eventType: string, listenerFn: Function) => {
   const el = rEl as unknown as Element;
   const eventListenerMap = el.__jsaction_fns ?? new Map();
   const eventListeners = eventListenerMap.get(eventType) ?? [];
@@ -93,10 +93,11 @@ export class GlobalEventDelegation implements OnDestroy {
     return isEarlyEventType(eventType);
   }
 
-  addEventListener(element: HTMLElement, eventType: string, handler: Function): Function {
-    this.eventContractDetails.instance!.addEvent(eventType);
-    getActionCache(element)[eventType] = '';
-    return () => this.removeEventListener(element, eventType, handler);
+  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);
   }
 
   removeEventListener(element: HTMLElement, eventType: string, callback: Function): void {
diff --git a/packages/core/src/event_dispatch/event_delegation.ts b/packages/core/src/event_dispatch/event_delegation.ts
@@ -9,13 +9,11 @@
 import {ENVIRONMENT_INITIALIZER, Injector} from '../di';
 import {inject} from '../di/injector_compatibility';
 import {Provider} from '../di/interface/provider';
-import {setStashFn} from '../render3/instructions/listener';
 import {
   GLOBAL_EVENT_DELEGATION,
   GlobalEventDelegation,
   JSACTION_EVENT_CONTRACT,
   initGlobalEventDelegation,
-  sharedStashFunction,
 } from '../event_delegation_utils';
 
 import {IS_GLOBAL_EVENT_DELEGATION_ENABLED} from '../hydration/tokens';
@@ -35,7 +33,6 @@ export function provideGlobalEventDelegation(): Provider[] {
         const injector = inject(Injector);
         const eventContractDetails = injector.get(JSACTION_EVENT_CONTRACT);
         initGlobalEventDelegation(eventContractDetails, injector);
-        setStashFn(sharedStashFunction);
       },
       multi: true,
     },
diff --git a/packages/core/test/event_dispatch/event_dispatch_spec.ts b/packages/core/test/event_dispatch/event_dispatch_spec.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ɵJSACTION_EVENT_CONTRACT, ɵprovideGlobalEventDelegation} from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  Renderer2,
+  ViewChild,
+  inject,
+  ɵprovideGlobalEventDelegation,
+} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 function configureTestingModule(components: unknown[]) {
@@ -183,4 +190,36 @@ describe('event dispatch', () => {
       expect(onClickSpy).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('manual listening', () => {
+    it('should trigger events when manually registered', 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;
+        listen(el: Element) {
+          this.destroy = this.renderer.listen(el, 'click', onClickSpy);
+        }
+      }
+      configureTestingModule([SimpleComponent]);
+      fixture = TestBed.createComponent(SimpleComponent);
+      const nativeElement = fixture.debugElement.nativeElement;
+      (fixture.componentInstance as SimpleComponent).listen(nativeElement);
+      const bottomEl = nativeElement.querySelector('#bottom')!;
+      bottomEl.click();
+      expect(onClickSpy).toHaveBeenCalledTimes(1);
+      (fixture.componentInstance as SimpleComponent).destroy();
+      bottomEl.click();
+      expect(onClickSpy).toHaveBeenCalledTimes(1);
+    });
+  });
 });
