Event Target is null after propagation stopped

[rothsandro]

Describe the bug
Happy DOM v15.1.0 changed how events are handled. If the propagation of an event is stopped, the event target is set to null. However, this is different from the browser behavior and breaks use cases when calling event.stopPropagation() but still keeping a reference to the event and using it later.

This is done in EventTarget.ts (also for target + none phase):

if (
  event[PropertySymbol.propagationStopped] ||
  event[PropertySymbol.immediatePropagationStopped]
) {
  event[PropertySymbol.eventPhase] = EventPhaseEnum.none;
  event[PropertySymbol.target] = null;
  event[PropertySymbol.currentTarget] = null;
  return;  
}

To Reproduce
Steps to reproduce the behavior:

1. Open the repro https://stackblitz.com/edit/stackblitz-starters-bbvwnt
2. Run node index.js in the terminal

Expected behavior
The event should have the button as target, even if the event propagation is stopped. event target: button should be logged in the console, but the target is null.

If you run the same code in the browser DevTools everything works fine, the target is still available.

Device:

• OS: Windows 11
• Browser Chrome v128

Additional context
We use a third-party component library and their tags component is broken with happy-dom 15.1.0 and above because of that new behavior. I don't know in detail what they are doing, but they somehow listen to the click event when selecting an item, dispatch a internal dxclick event and use the original event's target to get the selected item and its data. Because the event target is not available anymore, this breaks the selection.

[capricorn86]

Thank you for reporting @rothsandro! 🙂

This should now be fixed in v16.5.2

[rothsandro]

@capricorn86 Thanks 🙏