Couldn't stop click event of a disabled button from bubbling

[mgenware]

Description

Three disabled buttons shown in the demo page.

button0 is plain HTML/JS, no click handler triggered after click
button1 is a lit-element, handler triggered after click, seems click event is bubbling.
button2 is a lit-element, i called e.stopPropagation in the inner handler, still cannot stop it from bubbling.

Live Demo

https://stackblitz.com/edit/hy4yqu

Steps to Reproduce

Click button1 and button2

Expected Results

No alert

Actual Results

Alert shown

Browsers Affected

• Chrome
• Safari 11

Versions

• lit-element: v2.1.0
• webcomponents: v2.2.10

[Westbrook]

@mgenware in the case of my-button-v2.ts you are getting very close to what will be needed here, however to stop propagation to listeners on the same element you need to use stopImmediatePropagation() a la https://stackblitz.com/edit/hy4yqu-d6jkx9?file=my-button-v2.ts

Here's the MDN docs on that API https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

Good luck!

[mgenware]

Wow it works! thanks @Westbrook

[kevinpschaaf]

Sounds like there's not a LitElement bug here. Closing; please re-open if there is anything outstanding.