From 51347f8cbad8be0137b3beb7823e5464d0ed33ac Mon Sep 17 00:00:00 2001
From: b-ma <benjamin.matuszewski@gmail.com>
Date: Wed, 15 May 2024 16:43:41 +0200
Subject: [PATCH] fix: unwanted keyboard event when unfocused on Firefox

---
 src/sc-button.js |  9 +++++++--
 src/sc-tab.js    | 18 +++++-------------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/sc-button.js b/src/sc-button.js
index cf0e7df..6ee88a8 100644
--- 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
index 18397fc..0a5911b 100644
--- 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) {