dispatchEvent fired events don't bubble

[raystubbs]

Describe the bug
Events fired with dispatchEvent don't propagate up the DOM.

To Reproduce
Steps to reproduce the behavior:

1. Create a DOM like <div id="my-div"><button id="my-button"></button></div>
2. document.querySelector("#my-div").addEventListener("my-event", event => console.log(event))
3. document.querySelector("#my-button").dispatchEvent(new Event("my-event", {bubbles: true}))

Expected behavior
The event should bubble up to #my-div, and be printed by the listener. But that doesn't happen.

Device:

• OS: Macbook Pro, M1
• Version 15.11.7

[capricorn86]

Thank you for reporting @raystubbs! 🙂

I can't reproduce this issue in the latest version of Happy DOM.

Could the problem be that the console used is the default VirtualConsole, and therefore it is not printed out to the Node.js console?

You can change to use the Node.js console like this:

    const window = new Window({ console: globalThis.console });

If this doesn't solve your problem, please try with the latest version v16.3.0

[capricorn86]

Please re-open if you believe that the issue hasn't been solved.

[raystubbs]

Huh, odd, I'll investigate further and get back to you.

[raystubbs]

This is still definitely happening on my end. I'm on node 18, just downgraded from 21 to see if it was a version issue. But seeing this in both of them.

Here's my repro code:

const { Window } = require('happy-dom');
const window = new Window();

window.document.body.innerHTML = "<div><button>Click Me!</button></div>";

const div = window.document.querySelector("div");
const btn = window.document.querySelector("button");

for(const node of [div, btn]) {
  node.addEventListener("click", () => {
    console.log("click", node.nodeName);
  });

  node.addEventListener("a", () => {
    console.log("a", node.nodeName);
  });

  node.addEventListener("b", () => {
    console.log("b", node.nodeName);
  });

  node.addEventListener("c", () => {
    console.log("c", node.nodeName);
  });
}


btn.click();
btn.dispatchEvent(new Event("a", {bubbles: true}));
btn.dispatchEvent(new Event("b", {bubbles: true}));
btn.dispatchEvent(new Event("c", {bubbles: true}));

console.log("done");

And the output:

click BUTTON
click DIV
a BUTTON
b BUTTON
c BUTTON
done

And my yarn.lock:

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


happy-dom@^16.5.1:
  version "16.5.2"
  resolved "https://registry.yarnpkg.com/happy-dom/-/happy-dom-16.5.2.tgz#0521876d462d014f4f42db2ce95bf
8096a5ac9e0"
  integrity sha512-XWXjbbNjog3Me13Q9FQ5L1D7p4bCUdxrJndLVdsCIsCZgHpKz7HUQzAy+R2TidjKEz2Spe3gaqNpPPxOOkep
yg==
  dependencies:
    webidl-conversions "^7.0.0"
    whatwg-mimetype "^3.0.0"

webidl-conversions@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be
7debbf01d05f0aa2039778ea080a"
  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu
6g==

whatwg-mimetype@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6
ca3dc72ad6b8a4208beba7"
  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o
/Q==

[raystubbs]

I don't think Github will let me reopen this once it's been closed by the repo owner @capricorn86.

[capricorn86]

Re-opened 😊

[raystubbs]

Thanks 🙏

[capricorn86]

I'm still not able to reproduce the problem. I'm not sure if I have missed something. You are sure that you are running with a newer version of Happy DOM?

I have added your test as a unit test:
https://github.com/capricorn86/happy-dom/blob/master/packages/happy-dom/test/nodes/node/Node.test.ts#L1139

The output there is:

1. click:BUTTON
2. click:DIV
3. a:BUTTON
4. a:DIV
5. b:BUTTON
6. b:DIV
7. c:BUTTON
8. c:DIV

Which seem to be correct.

By the way, thank you for sponsoring me and Happy DOM! 🙏

[raystubbs]

I'm still not able to reproduce the problem. I'm not sure if I have missed something. You are sure that you are running with a newer version of Happy DOM?

Huh... that's very odd. That output seems right to me... which seems to indicate that whatever's going on is specific to my setup. I'll try cloning and running all the unit tests. See if they break on my system.

By the way, thank you for sponsoring me and Happy DOM! 🙏

My absolute pleasure! Isn't much. But I use Happy DOM quite a bit these days, and think it's an awesome project. Wanted to give what I could to show some appreciation.

[raystubbs]

Eh, my bad 😅 sorry for wasting your time and mine; I was dispatching instances of the wrong event class. Event instead of window.Event. Can't believe how long it too me to spot it 😬