From 52aaa756a7c3501e20ac5547c39cecf1b3a541ab Mon Sep 17 00:00:00 2001 From: 90 Date: Thu, 30 Jan 2020 12:58:02 +0100 Subject: [PATCH] fix(button): using space on button should not scroll page (#531) --- packages/button/src/LionButton.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js index 2795ec766..ab6857ba8 100644 --- a/packages/button/src/LionButton.js +++ b/packages/button/src/LionButton.js @@ -2,6 +2,8 @@ import { css, html, SlotMixin, DisabledWithTabIndexMixin, LitElement } from '@li // eslint-disable-next-line class-methods-use-this const isKeyboardClickEvent = e => e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */ +// eslint-disable-next-line class-methods-use-this +const isSpaceKeyboardClickEvent = e => e.keyCode === 32; /* space */ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) { static get properties() { @@ -227,6 +229,11 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) if (this.active || !isKeyboardClickEvent(e)) { return; } + + if (isSpaceKeyboardClickEvent(e)) { + e.preventDefault(); + } + // FIXME: In Edge & IE11, this toggling the active state to prevent bounce, does not work. this.active = true; const keyupHandler = keyupEvent => {