fix: do not click on Enter and Space when using key modifiers (#6404) (…

…#6523) Co-authored-by: Tatu Lund <[email protected]>
vaadin · Sep 25, 2023 · 95640e9 · 95640e9
1 parent b607e3c
commit 95640e9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/button/src/vaadin-button-mixin.js b/packages/button/src/vaadin-button-mixin.js
@@ -72,6 +72,10 @@ export const ButtonMixin = (superClass) =>
     _onKeyDown(event) {
       super._onKeyDown(event);
 
+      if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
+        return;
+      }
+
       if (this._activeKeys.includes(event.key)) {
         event.preventDefault();
 

diff --git a/packages/button/test/button.test.js b/packages/button/test/button.test.js
@@ -72,6 +72,24 @@ describe('vaadin-button', () => {
         expect(spy.called).to.be.false;
       });
 
+      const modifiers = ['Shift', 'Control', 'Alt'];
+      if (navigator.platform === 'MacIntel') {
+        modifiers.push('Meta');
+      }
+
+      modifiers.forEach((modifier) => {
+        it(`should not fire click event on ${key} when using modifier ${modifier}`, async () => {
+          const spy = sinon.spy();
+          element.addEventListener('click', spy);
+
+          await sendKeys({ down: modifier });
+          await sendKeys({ down: key });
+
+          expect(spy.called).to.be.false;
+          await sendKeys({ up: modifier });
+        });
+      });
+
       it(`should prevent default behaviour for keydown event on ${key}`, async () => {
         const spy = sinon.spy();
         element.addEventListener('keydown', spy);