From 4d8d3e7dddaff2c6e93d7ce80b252277d461a49a Mon Sep 17 00:00:00 2001
From: Nixon <lazaronixon@hotmail.com>
Date: Tue, 15 Oct 2024 12:26:49 -0300
Subject: [PATCH] Fix focus for tabs and menu

---
 CHANGELOG.md                                      |  2 +-
 .../app/javascript/controllers/menu_controller.js | 10 +++++++---
 .../app/javascript/controllers/tabs_controller.js | 15 +++++++++------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f72e627..136b04e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 - Adjust checkbox and radio size
 - Fix tab hover on dark mode
 - Fix menu and command hover on dark mode
-- Adjust menu component
+- Fix focus for tabs and menu
 - Set input--actor icon color
 
 ## [0.0.46] - 2024-10-14
diff --git a/lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js b/lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js
index 49d1a63..24d2f38 100644
--- a/lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js
+++ b/lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js
@@ -6,19 +6,23 @@ export default class extends Controller {
 
   indexValueChanged() {
     this.#removeTabstops()
-    this.#focusCurrentItem()
   }
 
   prev() {
-    this.indexValue > 0 && this.indexValue--
+    const hasPrevious = this.indexValue > 0
+    hasPrevious && this.indexValue--
+    hasPrevious && this.#focusCurrentItem()
   }
 
   next() {
-    this.indexValue < this.#lastIndex && this.indexValue++
+    const hasNext = this.indexValue < this.#lastIndex
+    hasNext && this.indexValue++
+    hasNext && this.#focusCurrentItem()
   }
 
   reset() {
     this.indexValue = 0
+    this.#focusCurrentItem()
   }
 
   #removeTabstops() {
diff --git a/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js b/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
index 8c74b11..02317e6 100644
--- a/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
+++ b/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
@@ -4,9 +4,8 @@ export default class extends Controller {
   static targets = [ "button", "tab" ]
   static values  = { index: Number }
 
-  indexValueChanged(index, previousIndex) {
+  indexValueChanged() {
     this.#showCurrentTab()
-    this.#focusCurrentButton(previousIndex !== undefined)
   }
 
   select({ target }) {
@@ -14,11 +13,15 @@ export default class extends Controller {
   }
 
   prev() {
-    this.indexValue > 0 && this.indexValue--
+    const hasPrevious = this.indexValue > 0
+    hasPrevious && this.indexValue--
+    hasPrevious && this.#focusCurrentButton()
   }
 
   next() {
-    this.indexValue < this.#lastIndex && this.indexValue++
+    const hasNext = this.indexValue < this.#lastIndex
+    hasNext && this.indexValue++
+    hasNext && this.#focusCurrentButton()
   }
 
   #showCurrentTab() {
@@ -32,8 +35,8 @@ export default class extends Controller {
     })
   }
 
-  #focusCurrentButton(shouldFocus) {
-    shouldFocus && this.buttonTargets[this.indexValue].focus()
+  #focusCurrentButton() {
+    this.buttonTargets[this.indexValue].focus()
   }
 
   get #lastIndex() {