fix(core): prevent event replay double-invocation when element hydrates before app stability

sonukapoor · amishne · commit d5fd51e9569b · 2026-04-27T17:07:36.000-07:00
When `withEventReplay()` is enabled and a component hydrates before the application becomes stable (e.g. while a pending HTTP request is in flight), a user interaction on the hydrated element triggers both the real DOM listener registered by Angular and the jsaction replay path. This causes the event handler to be invoked twice. The root cause is that `listenToDomEvent` registers the same `wrappedListener` both as a stashed jsaction handler (via `stashEventListenerImpl`) and as a native DOM listener (via `renderer.listen`). When the user interacts after hydration but before app stability, jsaction queues the event because no dispatcher is registered yet. Once the app stabilises and `initEventReplay` runs, jsaction replays the queued event through `invokeListeners`, which calls the stashed handler a second time. The fix tracks dispatched `(event, element)` pairs in a `WeakMap<Event, WeakSet<Element>>`. The native DOM listener wrapper records each pair via `markEventHandledForElement`, and `invokeListeners` skips replay for any pair already present. Keying by element (rather than event alone) preserves incremental hydration behaviour, where jsaction legitimately replays the same event on a different element (the deferred block content) from the one that originally triggered hydration. Fixes #67328
diff --git a/packages/core/src/event_delegation_utils.ts b/packages/core/src/event_delegation_utils.ts
@@ -101,11 +101,30 @@ export const JSACTION_EVENT_CONTRACT = new InjectionToken<EventContractDetails>(
   },
 );
 
+// Tracks (event, element) pairs already dispatched by a real DOM listener
+// post-hydration. Keyed per element so that jsaction can still replay the same
+// event on a *different* element (e.g. incremental hydration replays on a
+// deferred block's element, not the trigger that originally fired). Prevents
+// double-invocation when a component hydrates before app stability (#67328).
+const handledEventElements = new WeakMap<Event, WeakSet<Element>>();
+
+export function markEventHandledForElement(event: Event, element: Element): void {
+  let elements = handledEventElements.get(event);
+  if (!elements) {
+    elements = new WeakSet<Element>();
+    handledEventElements.set(event, elements);
+  }
+  elements.add(element);
+}
+
 export function invokeListeners(event: Event, currentTarget: Element | null) {
   const handlerFns = currentTarget?.__jsaction_fns?.get(event.type);
   if (!handlerFns || !currentTarget?.isConnected) {
     return;
   }
+  if (currentTarget && handledEventElements.get(event)?.has(currentTarget)) {
+    return;
+  }
   for (const handler of handlerFns) {
     handler(event);
   }
diff --git a/packages/core/src/render3/view/listeners.ts b/packages/core/src/render3/view/listeners.ts
@@ -28,6 +28,7 @@ import {assertNotSame} from '../../util/assert';
 import {handleUncaughtError} from '../instructions/shared';
 import {
   type EventCallback,
+  markEventHandledForElement,
   stashEventListenerImpl,
   type WrappedEventCallback,
 } from '../../event_delegation_utils';
@@ -162,7 +163,17 @@ export function listenToDomEvent(
 
     stashEventListenerImpl(lView, target, eventName, wrappedListener);
 
-    const cleanupFn = renderer.listen(target as RElement, eventName, wrappedListener);
+    // Wrap the real DOM listener to mark the (event, element) pair as handled.
+    // This prevents jsaction from replaying events that were already dispatched
+    // by a real DOM listener post-hydration while keeping replay working for
+    // other elements (e.g. incremental hydration — see #67328).
+    const domListener = (event: Event) => {
+      if (!eventTargetResolver) {
+        markEventHandledForElement(event, native as unknown as Element);
+      }
+      return wrappedListener(event);
+    };
+    const cleanupFn = renderer.listen(target as RElement, eventName, domListener);
 
     // We skip cleaning up animation event types to ensure leaving animation events can be used.
     // These events should be automatically garbage collected anyway after the element is
diff --git a/packages/platform-server/test/event_replay_spec.ts b/packages/platform-server/test/event_replay_spec.ts
@@ -90,6 +90,53 @@ describe('event replay', () => {
     window._ejsas = {};
   });
 
+  // Issue #67328: post-hydration events must not be replayed
+  it('should not replay an event that was already handled by a real DOM listener after component hydration', async () => {
+    const onClickSpy = jasmine.createSpy();
+    let removeTask: (() => void) | null = null;
+
+    @Component({
+      selector: 'app',
+      template: `<button id="btn" (click)="onClick()"></button>`,
+    })
+    class AppComponent {
+      constructor() {
+        if (isPlatformBrowser(inject(PLATFORM_ID))) {
+          removeTask = inject(PendingTasks).add();
+        }
+      }
+      onClick = onClickSpy;
+    }
+
+    const hydrationFeatures = () => [withEventReplay()];
+    const html = await ssr(AppComponent, {hydrationFeatures});
+    const ssrContents = getAppContents(html);
+    const doc = getDocument();
+
+    prepareEnvironment(doc, ssrContents);
+    resetTViewsFor(AppComponent);
+
+    // Hydrate the component (registers real DOM listeners) but keep app unstable
+    const appRef = await hydrate(doc, AppComponent, {hydrationFeatures});
+    appRef.tick();
+
+    // Click AFTER hydration: real DOM listener fires once, jsaction also queues it
+    const btn = doc.getElementById('btn')!;
+    btn.click();
+
+    // Real DOM listener should have fired once
+    expect(onClickSpy).toHaveBeenCalledTimes(1);
+
+    // Let the app become stable — triggers whenStable() which kicks off jsaction replay
+    removeTask!();
+    await appRef.whenStable();
+    appRef.tick();
+
+    // Without the fix, jsaction replay fires the handler a second time (count = 2).
+    // With the fix, the post-hydration event must not be replayed again (count = 1).
+    expect(onClickSpy).toHaveBeenCalledTimes(1);
+  });
+
   it('should work for elements with local refs', async () => {
     const onClickSpy = jasmine.createSpy();
 
