What is the current behavior?

A regression was introduced in commit 1304ffc that causes infinite recursion when blur event handlers call blur() on input elements within the mock DOM environment. This results in "Maximum call stack size exceeded" errors during Stencil tests.

The issue manifests when:

1. input.blur() is called, which dispatches a blur event
2. A blur event handler processes the event and calls querySelector to find elements
3. The event handler then calls blur() on the same input element again
4. This creates an infinite loop between event dispatching and event handling

GitHub Issue Number: #6307

What is the new behavior?

Added a recursion prevention mechanism that:

• Tracks elements currently processing specific event types using a WeakMap
• Prevents the same element from dispatching the same event type while already processing it
• Allows the first blur event to be processed normally (blur count increments to 1)
• Blocks subsequent recursive calls to prevent stack overflow
• Maintains full backward compatibility with existing event handling

The fix is targeted specifically at the MockElement.blur() method and uses efficient tracking with proper cleanup to avoid memory leaks.

Documentation

N/A - This is a bug fix that doesn't require documentation changes.

Does this introduce a breaking change?

• Yes
• No

This fix maintains full backward compatibility. All existing event tests continue to pass, and the change only affects the specific edge case of recursive blur event dispatching.

Testing

Unit Tests:

• Added comprehensive test case should prevent infinite recursion when blur event handler calls blur that:
  • Creates a component with a blur event handler that calls blur() on an input element
  • Verifies the blur count increments to exactly 1 (not 0, not infinite)
  • Confirms no stack overflow occurs
• Verified all existing event tests still pass (9/9 tests passing)

Test Coverage:

• The test simulates the exact scenario reported in the regression
• Uses proper Stencil component syntax with @Element, @State, @Listen, and @Method decorators
• Validates both the prevention of infinite recursion and the correct processing of the initial event

Manual Verification:

• Confirmed the fix resolves the original "Maximum call stack size exceeded" error
• Tested that legitimate blur events continue to work as expected

Other information

Technical Implementation Details:

• Uses WeakMap for efficient element tracking without memory leaks
• Implements proper cleanup in try/finally blocks
• Places recursion check at the MockElement.blur() level rather than the general event dispatching level for precise control
• The solution is minimal and focused, affecting only the specific problematic code path

Files Modified:

• src/mock-doc/node.ts: Added recursion prevention to MockElement.blur() method
• src/runtime/test/event.spec.tsx: Added test case for recursion prevention

This fix ensures Stencil tests can run reliably without encountering stack overflow errors when blur event handlers interact with input elements.