refactor: no longer re-dispatches an event copy for afterDispatch() logic

asyncliz · copybara-github · commit 7d39d6e698b5 · 2026-04-16T13:26:26.000-07:00
PiperOrigin-RevId: 900881800
diff --git a/internal/events/dispatch-hooks.ts b/internal/events/dispatch-hooks.ts
@@ -77,7 +77,7 @@ export function afterDispatch(event: Event, callback: () => void) {
     throw new Error(`'${event.type}' event needs setupDispatchHooks().`);
   }
 
-  hooks.addEventListener('after', callback);
+  hooks.addEventListener('after', callback, {once: true});
 }
 
 /**
@@ -122,55 +122,58 @@ export function setupDispatchHooks(
 
   for (const eventType of eventTypes) {
     // Don't register multiple dispatch hook listeners. A second registration
-    // would lead to the second listener re-dispatching a re-dispatched event,
-    // which can cause an infinite loop inside the other one.
+    // would lead to the second listener calling `afterDispatch()` hooks twice.
     if (typesAlreadySetUp.has(eventType)) {
       continue;
     }
 
-    // When we re-dispatch the event, it's going to immediately trigger this
-    // listener again. Use a flag to ignore it.
-    let isRedispatching = false;
     element.addEventListener(
       eventType,
       (event: Event) => {
-        if (isRedispatching) {
-          return;
-        }
-
-        // Do not let the event propagate to any other listener (not just
-        // bubbling listeners with `stopPropagation()`).
-        event.stopImmediatePropagation();
-        // Make a copy.
-        const eventCopy = Reflect.construct(event.constructor, [
-          event.type,
-          event,
-        ]);
-
         // Add hooks onto the event.
         const hooks = new EventTarget();
-        (eventCopy as EventWithDispatchHooks)[dispatchHooks] = hooks;
+        (event as EventWithDispatchHooks)[dispatchHooks] = hooks;
 
-        // Re-dispatch the event. We can't reuse `redispatchEvent()` since we
-        // need to add the hooks to the copy before it's dispatched.
-        isRedispatching = true;
-        const composedPathIncludesAnchor = event
-          .composedPath()
-          .some((el) => (el as Partial<HTMLElement>)?.matches?.('a'));
-        if (event.type === 'click' && composedPathIncludesAnchor) {
-          // For legacy reasons, synthetic click events dispatching on
-          // HTMLAnchorElement will trigger link behavior. Prevent this since
-          // we will dispatch a copy of the same click event.
-          event.preventDefault();
-        }
-        const dispatched = event.composedPath()[0].dispatchEvent(eventCopy);
-        isRedispatching = false;
-        if (!dispatched) {
-          event.preventDefault();
+        const cleanupLastNodeListener = new AbortController();
+        const callAfterDispatch = () => {
+          cleanupLastNodeListener.abort();
+          hooks.dispatchEvent(new Event('after'));
+        };
+
+        const patchStopPropagation = (
+          superMethod: Event['stopPropagation'],
+        ) => {
+          return function (this: Event) {
+            superMethod.call(this);
+            // Synchronously call afterDispatch() hooks when interrupted.
+            callAfterDispatch();
+          };
+        };
+
+        event.stopPropagation = patchStopPropagation(event.stopPropagation);
+        event.stopImmediatePropagation = patchStopPropagation(
+          event.stopImmediatePropagation,
+        );
+
+        // Add an event listener to detect the end of the event's propagation.
+        const composedPath = event.composedPath();
+        let lastNodeForEvent: EventTarget;
+        if (event.composed && event.bubbles) {
+          lastNodeForEvent = composedPath[composedPath.length - 1];
+        } else if (!event.bubbles) {
+          lastNodeForEvent = composedPath[0];
+        } else {
+          lastNodeForEvent = (composedPath[0] as Element).getRootNode();
         }
 
-        // Synchronously call afterDispatch() hooks.
-        hooks.dispatchEvent(new Event('after'));
+        lastNodeForEvent.addEventListener(
+          eventType,
+          () => {
+            // Synchronously call afterDispatch() hooks.
+            callAfterDispatch();
+          },
+          {once: true, signal: cleanupLastNodeListener.signal},
+        );
       },
       {
         // Ensure this listener runs before other listeners.
diff --git a/internal/events/dispatch-hooks_test.ts b/internal/events/dispatch-hooks_test.ts
@@ -54,27 +54,6 @@ describe('dispatch hooks', () => {
         .withContext('innerClickListener')
         .toHaveBeenCalledTimes(1);
     });
-
-    it('should not trigger activation behavior for clicks coming from inner <a> elements', () => {
-      const shadowRoot = element.attachShadow({mode: 'open'});
-      const anchorElement = document.createElement('a');
-      anchorElement.href = '#';
-      shadowRoot.appendChild(anchorElement);
-
-      setupDispatchHooks(element, 'click');
-
-      const clickEvent = new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      });
-
-      anchorElement.dispatchEvent(clickEvent);
-
-      expect(clickEvent.defaultPrevented)
-        .withContext('clickEvent.defaultPrevented')
-        .toBeTrue();
-    });
   });
 
   describe('afterDispatch()', () => {
@@ -212,5 +191,224 @@ describe('dispatch hooks', () => {
         .withContext('afterDispatch() callback')
         .toHaveBeenCalledTimes(1);
     });
+
+    it('is called after parent event listeners are called', () => {
+      setupDispatchHooks(element, 'click');
+
+      const callOrder: string[] = [];
+      element.addEventListener('click', (event) => {
+        callOrder.push('element@click');
+        afterDispatch(event, () => {
+          callOrder.push('afterDispatch');
+        });
+      });
+      document.addEventListener('click', () => {
+        callOrder.push('parent@click');
+      });
+
+      element.click();
+
+      const expectedCallOrder = [
+        'element@click',
+        'parent@click',
+        'afterDispatch',
+      ];
+      expect(callOrder)
+        .withContext('call order of event listeners and afterDispatch()')
+        .toEqual(expectedCallOrder);
+    });
+
+    it('is called after other event listeners for non-bubbling events', () => {
+      setupDispatchHooks(element, 'change');
+
+      const callOrder: string[] = [];
+      element.addEventListener('change', (event) => {
+        callOrder.push('element@change');
+        afterDispatch(event, () => {
+          callOrder.push('afterDispatch');
+        });
+      });
+      element.addEventListener('change', () => {
+        callOrder.push('element@change2');
+      });
+
+      element.dispatchEvent(new Event('change'));
+
+      const expectedCallOrder = [
+        'element@change',
+        'element@change2',
+        'afterDispatch',
+      ];
+      expect(callOrder)
+        .withContext('call order of event listeners and afterDispatch()')
+        .toEqual(expectedCallOrder);
+    });
+
+    it('is called after other event listeners for bubbling non-composed events in a shadow root', () => {
+      const shadowRoot = element.attachShadow({mode: 'open'});
+      const child = document.createElement('div');
+      shadowRoot.appendChild(child);
+
+      setupDispatchHooks(child, 'custom-event');
+
+      const callOrder: string[] = [];
+      child.addEventListener('custom-event', (event) => {
+        callOrder.push('child@custom-event');
+        afterDispatch(event, () => {
+          callOrder.push('afterDispatch');
+        });
+      });
+      shadowRoot.addEventListener('custom-event', () => {
+        callOrder.push('shadowRoot@custom-event');
+      });
+      const elementListener = jasmine.createSpy('elementListener');
+      element.addEventListener('custom-event', elementListener);
+
+      child.dispatchEvent(
+        new Event('custom-event', {bubbles: true, composed: false}),
+      );
+
+      const expectedCallOrder = [
+        'child@custom-event',
+        'shadowRoot@custom-event',
+        'afterDispatch',
+      ];
+
+      expect(callOrder)
+        .withContext('call order of event listeners and afterDispatch()')
+        .toEqual(expectedCallOrder);
+      expect(elementListener)
+        .withContext(
+          'listener on element with shadow root should not be called for `composed: false` event',
+        )
+        .not.toHaveBeenCalled();
+    });
+
+    it('is called when parent non-root event listeners stop propagation', () => {
+      setupDispatchHooks(element, 'click');
+
+      /*
+      #document (root - should not be called)
+        element (parent - stops propagation)
+          child (child - calls afterDispatch)
+      */
+      const child = document.createElement('div');
+      element.appendChild(child);
+      const childAfterDispatchCallback = jasmine.createSpy(
+        'childAfterDispatchCallback',
+      );
+      child.addEventListener('click', (event) => {
+        afterDispatch(event, childAfterDispatchCallback);
+      });
+      element.addEventListener('click', (event) => {
+        event.stopPropagation();
+      });
+      const rootClickListener = jasmine.createSpy('rootClickListener');
+      document.addEventListener('click', rootClickListener);
+
+      child.click();
+
+      expect(rootClickListener)
+        .withContext('root click listener')
+        .not.toHaveBeenCalled();
+      expect(childAfterDispatchCallback)
+        .withContext('child afterDispatch() callback')
+        .toHaveBeenCalledTimes(1);
+    });
+
+    it('is called when parent non-root event listeners immediately stops propagation', () => {
+      setupDispatchHooks(element, 'click');
+
+      /*
+        element (parent - stops propagation immediately)
+          child (child - calls afterDispatch)
+      */
+      const child = document.createElement('div');
+      element.appendChild(child);
+      const childAfterDispatchCallback = jasmine.createSpy(
+        'childAfterDispatchCallback',
+      );
+      child.addEventListener('click', (event) => {
+        afterDispatch(event, childAfterDispatchCallback);
+      });
+      element.addEventListener('click', (event) => {
+        event.stopImmediatePropagation();
+      });
+      const additionalClickListener = jasmine.createSpy(
+        'notCalledClickListener',
+      );
+      document.addEventListener('click', additionalClickListener);
+
+      child.click();
+
+      expect(additionalClickListener)
+        .withContext('additional click listener after propagation is stopped')
+        .not.toHaveBeenCalled();
+      expect(childAfterDispatchCallback)
+        .withContext('child afterDispatch() callback')
+        .toHaveBeenCalledTimes(1);
+    });
+
+    it('is DOES NOT support being called after the execution of the event listener that stopped propagation', () => {
+      setupDispatchHooks(element, 'click');
+
+      const child = document.createElement('div');
+      element.appendChild(child);
+      const callOrder: string[] = [];
+      child.addEventListener('click', (event) => {
+        callOrder.push('child@click');
+        afterDispatch(event, () => {
+          callOrder.push('afterDispatch');
+        });
+      });
+      element.addEventListener('click', (event) => {
+        callOrder.push('parent@click');
+        event.stopPropagation();
+        callOrder.push('parent done');
+      });
+
+      child.click();
+
+      // Ideally, when the event stops propagating, afterDispatch() is called
+      // directly after the execution of the function that stops propagation.
+      // However, this would mean introducing asynchronicity, which is not
+      // allowed. The compromise is to synchronously call afterDispatch() hooks
+      // when propagation is stopped.
+      const desiredCallOrder = [
+        'child@click',
+        'parent@click',
+        'parent done',
+        'afterDispatch',
+      ];
+      const expectedCallOrder = [
+        'child@click',
+        'parent@click',
+        'afterDispatch',
+        'parent done',
+      ];
+      expect(callOrder)
+        .withContext('call order of event listeners and afterDispatch()')
+        .toEqual(expectedCallOrder);
+      expect(callOrder).not.toEqual(desiredCallOrder);
+    });
+
+    it('is not called multiple times if stopPropagation() is called multiple times', () => {
+      setupDispatchHooks(element, 'click');
+
+      const afterDispatchCallback = jasmine.createSpy('afterDispatchCallback');
+      element.addEventListener('click', (event) => {
+        afterDispatch(event, afterDispatchCallback);
+      });
+      element.addEventListener('click', (event) => {
+        event.stopPropagation();
+        event.stopPropagation();
+      });
+
+      element.click();
+
+      expect(afterDispatchCallback)
+        .withContext('afterDispatch() callback')
+        .toHaveBeenCalledTimes(1);
+    });
   });
 });
