ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(button): using space on button should not scroll page (#531)

Browse source
This commit is contained in:
90 2020-01-30 12:58:02 +01:00 committed by GitHub
parent afdfdaa36a
commit 52aaa756a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/button/src/LionButton.js
View file

@ -2,6 +2,8 @@ import { css, html, SlotMixin, DisabledWithTabIndexMixin, LitElement } from '@li
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
const isKeyboardClickEvent = e => e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */ 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)) { export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) {
static get properties() { static get properties() {
@ -227,6 +229,11 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
if (this.active || !isKeyboardClickEvent(e)) { if (this.active || !isKeyboardClickEvent(e)) {
return; return;
} }
if (isSpaceKeyboardClickEvent(e)) {
e.preventDefault();
}
// FIXME: In Edge & IE11, this toggling the active state to prevent bounce, does not work. // FIXME: In Edge & IE11, this toggling the active state to prevent bounce, does not work.
this.active = true; this.active = true;
const keyupHandler = keyupEvent => { const keyupHandler = keyupEvent => {