FireFox events do not bubble or propagate from shadow to light DOM

Question

EDIT 4

Ok, I hope this additional info seals it.

Firefox DOES bubble the synthetic CLICK that I generate on SPACEBAR / ENTER, but it DOES NOT bubble the mouse CLICK.

CHROME, OPERA, and EDGE work as expected. (both events bubble)

All Browsers bubble INPUT events for both mouse and synthetic clicks.

Both events are COMPOSED, CANCELLABLE, and BUBBLE.

The only difference I have seen is the synthetic CLICK event has had its TARGET set to ABC-TOGGLE#myToggle whereas the TARGET for the mouse CLICK is still input checkbox.

Note: I do understand that SPACEBAR is normally a first class CLICK event for checkboxes but I have stopPropagation() for uniformity with CR.

Why won't the mouse CLICKs traverse the DOMs?

END EDIT 4

EDIT 3

Ok, I'm an idiot! Never knew spacebar is an intrinsic click :-(

END EDIT 3

EDIT 2

More info: Chrome triggers both a Click and an Input event in that order. Firefox agrees with spacebar/synthetic event but won't surface a Click to the light DOM when the mouse is clicked.

This now works for FireFox and Chrome both TickBox and Toggle. But the SpaceBar CarrriageReturn functionality does not work. Still on it.

END EDIT 2

EDIT 1

Firefox does in fact bubble an event through to the light DOM but it is an INPUT event; not a CLICK event. Why?

END EDIT 1

The documentations says events triggered on elements in the Shadow DOM that make up a Web Component should pass from shadow to light DOM with the target, currentTarget, originalTarget et al coalesced into the Web-Component tagName, id, and so on.

This is not happening with FireFox in this exaple

in test_toggle.html I wish to be notified of a "click" event on my "disTick" tickbox so that I can disable the Toggle: -

            document.getElementById("disTick").addEventListener("click", (e) => {
                            if (e.target.checked)
                                myToggle.disabled=true;
                            else
                                myToggle.disabled=false;
                        });
                        
            document.body.addEventListener("change", (e) => {console.log("****"+e.target.tagName);});

It gets called on Chrome, Edge, Opera, but not FireFox.

(I have tried to trap click, input, and chang events on BODY but nothing bubbles.)

Curiously enough, my synthetic event does bubble up (from toggle.js)

    this.#toggle.addEventListener('keyup', (e) => {
            if (e.altKey || e.ctrlKey || e.isComposing || e.metaKey || e.shiftKey)
                return;
            
            if (e.keyCode == 32 || e.keyCode == 13)
            {
                console.log("key = " + e.keyCode);
                e.preventDefault();
                this.#toggle.click();   
            }
        });

What am I missing/ Why isn't the original click bubbling through light DOM on FireFox?

Answer 1

Ok,the answer was fairly simple. I had fallen for the school boy trap of thinking disabled=false meant the element was not disabled.

Anway I have corrected that logic error and now FireFox and Safari are happy as well as Chrome/Edge/Opera/Samsung

See demo for proof positive or look at Source Code for more info