From d897f0cbdc0064a51f63f52ae892aa5888d1998f Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Mon, 11 Oct 2021 10:51:35 -0400 Subject: [PATCH] fix(button): prevent event propagation to children of disabled buttons --- src/components/button/button.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/button/button.ts b/src/components/button/button.ts index cb705b8da..f6bc3cc28 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -14,6 +14,8 @@ import ifNonNull from '../../globals/directives/if-non-null'; import FocusMixin from '../../globals/mixins/focus'; import { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT } from './defs'; import styles from './button.scss'; +import HostListener from '../../globals/decorators/host-listener'; +import HostListenerMixin from '../../globals/mixins/host-listener'; export { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT }; @@ -25,7 +27,7 @@ const { prefix } = settings; * @csspart button The button. */ @customElement(`${prefix}-btn`) -class BXButton extends FocusMixin(LitElement) { +class BXButton extends HostListenerMixin(FocusMixin(LitElement)) { /** * `true` if there is an icon. */ @@ -48,6 +50,15 @@ class BXButton extends FocusMixin(LitElement) { this.requestUpdate(); } + @HostListener('click', { capture: true }) + // @ts-ignore + private _handleDisabledClick(event: Event) { + const { disabled } = this; + if (disabled) { + event.stopPropagation(); + } + } + /** * `true` if the button should have input focus when the page loads. */