fix(mock-doc): prevent infinite recursion in blur event handlers (#6310)

christian-bromann · web-flow · commit 092cacda99b3 · 2025-06-20T11:07:25.000-07:00
* fix(mock-doc): prevent infinite recursion in blur event handlers Fixes a regression introduced in commit 1304ffc where blur event handlers calling blur() on input elements would cause infinite recursion and "Maximum call stack size exceeded" errors. The issue occurred when: 1. input.blur() dispatches a blur event 2. blur event handler calls blur() on the same element 3. This creates an infinite loop leading to stack overflow Solution: - Add recursion prevention mechanism using WeakMap to track elements currently processing specific event types - Modify MockElement.blur() to check for existing blur processing - Allow first blur event to process normally while preventing recursive calls - Add comprehensive test case to verify fix and prevent regressions Closes: #6307 * prettier
diff --git a/src/mock-doc/node.ts b/src/mock-doc/node.ts
@@ -277,10 +277,21 @@ export class MockElement extends MockNode {
   }
 
   blur() {
-    dispatchEvent(
-      this,
-      new MockFocusEvent('blur', { relatedTarget: null, bubbles: true, cancelable: true, composed: true }),
-    );
+    // Prevent infinite recursion when blur event handlers call blur()
+    // on the same element while it's already processing a blur event
+    if (isCurrentlyDispatching(this, 'blur')) {
+      return;
+    }
+
+    markAsDispatching(this, 'blur');
+    try {
+      dispatchEvent(
+        this,
+        new MockFocusEvent('blur', { relatedTarget: null, bubbles: true, cancelable: true, composed: true }),
+      );
+    } finally {
+      unmarkAsDispatching(this, 'blur');
+    }
   }
 
   get localName() {
@@ -1233,3 +1244,43 @@ function setTextContent(elm: MockElement, text: string) {
   const textNode = new MockTextNode(elm.ownerDocument, text);
   elm.appendChild(textNode);
 }
+
+// Track currently dispatching events to prevent infinite recursion
+const currentlyDispatching = new WeakMap<any, Set<string>>();
+
+/**
+ * @param target - The element that is currently dispatching an event.
+ * @param eventType - The type of event that is currently dispatching.
+ * @returns True if the element is currently dispatching the event, false otherwise.
+ */
+export function isCurrentlyDispatching(target: any, eventType: string): boolean {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  return dispatchingEvents != null && dispatchingEvents.has(eventType);
+}
+
+/**
+ * @param target - The element that is currently dispatching an event.
+ * @param eventType - The type of event that is currently dispatching.
+ */
+export function markAsDispatching(target: any, eventType: string): void {
+  let dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents == null) {
+    dispatchingEvents = new Set<string>();
+    currentlyDispatching.set(target, dispatchingEvents);
+  }
+  dispatchingEvents.add(eventType);
+}
+
+/**
+ * @param target - The element that is currently dispatching an event.
+ * @param eventType - The type of event that is currently dispatching.
+ */
+export function unmarkAsDispatching(target: any, eventType: string): void {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents != null) {
+    dispatchingEvents.delete(eventType);
+    if (dispatchingEvents.size === 0) {
+      currentlyDispatching.delete(target);
+    }
+  }
+}
diff --git a/src/runtime/test/event.spec.tsx b/src/runtime/test/event.spec.tsx
@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Listen, Method, State } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Listen, Method, State } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 describe('event', () => {
@@ -316,4 +316,75 @@ describe('event', () => {
       `);
     });
   });
+
+  it('should prevent infinite recursion when blur event handler calls blur', async () => {
+    @Component({ tag: 'cmp-blur-recursion' })
+    class CmpBlurRecursion {
+      @Element() el!: HTMLElement;
+
+      @State() blurCount = 0;
+      @State() inputValue = '';
+
+      @Listen('blur')
+      handleBlur() {
+        this.blurCount++;
+        // This simulates the scenario where a blur handler
+        // tries to blur an input element
+        const input = this.el.querySelector('input');
+        if (input && this.blurCount < 5) {
+          // Only try to blur if we haven't reached our limit
+          // This prevents the test from running forever if the fix doesn't work
+          input.blur();
+        }
+      }
+
+      @Method()
+      async triggerBlur() {
+        const input = this.el.querySelector('input');
+        if (input) {
+          input.blur();
+        }
+      }
+
+      render() {
+        return h(
+          'div',
+          null,
+          h('input', {
+            value: this.inputValue,
+            onInput: (e: any) => (this.inputValue = (e.target as HTMLInputElement).value),
+          }),
+          h('div', null, `Blur count: ${this.blurCount}`),
+        );
+      }
+    }
+
+    const { root, waitForChanges } = await newSpecPage({
+      components: [CmpBlurRecursion],
+      html: `<cmp-blur-recursion></cmp-blur-recursion>`,
+    });
+
+    expect(root).toEqualHtml(`
+      <cmp-blur-recursion>
+        <div>
+          <input value="">
+          <div>Blur count: 0</div>
+        </div>
+      </cmp-blur-recursion>
+    `);
+
+    // Trigger the blur event that should NOT cause infinite recursion
+    await root.triggerBlur();
+    await waitForChanges();
+
+    // The blur count should be 1, not cause infinite recursion
+    expect(root).toEqualHtml(`
+      <cmp-blur-recursion>
+        <div>
+          <input value="">
+          <div>Blur count: 1</div>
+        </div>
+      </cmp-blur-recursion>
+    `);
+  });
 });
