From d072a685cf452c16b80e01aa802e71b614ecf090 Mon Sep 17 00:00:00 2001
From: dudubtw <carloseduardo108090@hotmail.com>
Date: Sun, 3 Nov 2024 13:05:42 -0300
Subject: [PATCH] - Improve tabs keyboard controls 2

---
 .../roving-focus-group/rovingFocusGroup.ts    | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
index 6057dee1..ce3d4b46 100644
--- a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
+++ b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
@@ -59,7 +59,33 @@ export function useRovingFocusGroup(props: Params = {}) {
     setCurrentStopId(firstNode.getAttribute(ITEM_DATA_ATTR)!);
   };
 
-  const handleKeyUp = (
+  const handleListKeyUp = (
+    event: KeyboardEvent & {
+      currentTarget: DOMElement;
+      target: DOMElement;
+    },
+  ) => {
+    if (!event.currentTarget.isSameNode(event.target)) {
+      return;
+    }
+
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowLeft":
+      case "ArrowDown":
+      case "ArrowRight": {
+        event.preventDefault();
+        tryFocusFirstItem();
+        break;
+      }
+
+      default: {
+        break;
+      }
+    }
+  };
+
+  const handleItemKeyUp = (
     event: KeyboardEvent & {
       currentTarget: DOMElement;
       target: DOMElement;
@@ -150,7 +176,7 @@ export function useRovingFocusGroup(props: Params = {}) {
     tryFocusFirstItem,
     value: currentStopId,
     attrs: {
-      onKeyUp: handleKeyUp,
+      onKeyUp: handleListKeyUp,
       ref: (node: HTMLElement) => {
         container = node;
       },
@@ -212,7 +238,7 @@ export function useRovingFocusGroup(props: Params = {}) {
         isSelected,
         tabIndex,
         attrs: {
-          onKeyUp: handleKeyUp,
+          onKeyUp: handleItemKeyUp,
           onClick: handleClick,
           onPointerMove: handlePointerMove,
           [ITEM_DATA_ATTR]: tabStopId ?? "fallback",