fix: unwanted keyboard event when unfocused on Firefox

ircam-ismm · May 15, 2024 · 51347f8 · 51347f8
1 parent 81843b9
commit 51347f8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/src/sc-button.js b/src/sc-button.js
@@ -22,6 +22,11 @@ class ScButtonBase extends ScElement {
       type: Boolean,
       reflect: true,
     },
+    disableKeyboard: {
+      type: Boolean,
+      reflect: true,
+      attribute: 'disable-keyboard',
+    },
     _pressed: {
       type: Boolean,
       state: true,
@@ -184,7 +189,7 @@ class ScButtonBase extends ScElement {
   }
 
   _onKeyboardEvent(e) {
-    if (this.disabled) { return; }
+    if (this.disabled || this.disableKeyboard) { return; }
 
     const eventName = e.type === 'keydown' ? 'press' : 'release';
     this._dispatchEvent(eventName);
@@ -200,7 +205,7 @@ class ScButtonBase extends ScElement {
   }
 
   _dispatchEvent(eventName) {
-        // we don't want to trigger a release if no pressed has been recorded
+    // we don't want to trigger a release if no pressed has been recorded
     if (eventName === 'release' && this._pressed === false) {
       return;
     }

diff --git a/src/sc-tab.js b/src/sc-tab.js
@@ -99,6 +99,7 @@ class ScTab extends ScElement {
       return html`
         <sc-button
           .value=${value}
+          disable-keyboard
           ?selected=${value === this.value}
           @input="${this._onInput}"
           @focus=${e => e.preventDefault()}
@@ -120,19 +121,10 @@ class ScTab extends ScElement {
     if (e.type === 'keydown') {
       let index = this.options.indexOf(this.value);
 
-      // ArrowUp / ArrowDown do not behave the same regarding direction
-      if (this.orientation === 'horizontal') {
-        if (e.code === 'ArrowUp' || e.code === 'ArrowRight' || e.code === 'Space' || e.code == 'Enter') {
-          index += 1;
-        } else if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-          index -= 1;
-        }
-      } else {
-        if (e.code === 'ArrowDown' || e.code === 'ArrowRight' || e.code === 'Space' || e.code == 'Enter') {
-          index += 1;
-        } else if (e.code === 'ArrowUp' || e.code === 'ArrowLeft') {
-          index -= 1;
-        }
+      if (e.code === 'ArrowDown' || e.code === 'ArrowRight' || e.code === 'Space' || e.code === 'Enter') {
+        index += 1;
+      } else if (e.code === 'ArrowUp' || e.code === 'ArrowLeft') {
+        index -= 1;
       }
 
       if (index < 0) {