fix(useButtonNavigation): wrong click navigation

app/composables/useButtonNavigation.ts

@@ -9,7 +9,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   buttons: T;
   initialButton: keyof T;
   onButtonClick?: (buttonName: keyof T) => void;
-  navigation?: Record<
+  navigation: Record<
     keyof T,
     {
       up?: keyof T;
@@ -35,6 +35,13 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
         if (selectedButton.value === buttonName) {
           onButtonClick?.(buttonName);
         } else {
+          if (
+            navigation[buttonName].down === "last" &&
+            navigation[selectedButton.value]!.up === buttonName
+          ) {
+            nextButton.value = selectedButton.value;
+          }
+
           selectedButton.value = buttonName;
         }
         break;
@@ -42,77 +49,78 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
     }
   });
 
-  if (navigation) {
+  const handleKeyPress = (event: KeyboardEvent) => {
-    const handleKeyPress = (event: KeyboardEvent) => {
+    const currentButton = selectedButton.value as keyof T;
-      const currentButton = selectedButton.value as keyof T;
+    const currentNav = navigation[currentButton];
-      const currentNav = navigation[currentButton];
 
-      if (!currentNav) return;
+    if (!currentNav) return;
 
-      switch (event.key) {
+    switch (event.key) {
-        case "ArrowUp":
+      case "ArrowUp":
-          if (!currentNav.up) return;
+        if (!currentNav.up) return;
 
-          if (currentNav.up === "last") {
+        if (currentNav.up === "last") {
+          selectedButton.value = nextButton.value;
+        } else {
+          nextButton.value = selectedButton.value as keyof T;
+          selectedButton.value = currentNav.up;
+        }
+
+        break;
+
+      case "ArrowDown":
+        if (!currentNav.down) return;
+
+        if (currentNav.down === "last") {
+          if (nextButton.value) {
             selectedButton.value = nextButton.value;
           } else {
-            nextButton.value = selectedButton.value as keyof T;
+            selectedButton.value = currentNav.left ?? currentNav.right;
-            selectedButton.value = currentNav.up;
           }
+        } else {
+          selectedButton.value = currentNav.down;
+        }
+        break;
 
-          break;
+      case "ArrowLeft":
+        if (!currentNav.left) return;
 
-        case "ArrowDown":
+        if (currentNav.horizontalMode === "preview") {
-          if (!currentNav.down) return;
+          nextButton.value = currentNav.left;
+        } else {
+          selectedButton.value = currentNav.left;
+        }
+        break;
 
-          if (currentNav.down === "last") {
+      case "ArrowRight":
-            if (nextButton.value) {
+        if (!currentNav.right) return;
-              selectedButton.value = nextButton.value;
-            } else {
-              selectedButton.value = currentNav.left ?? currentNav.right;
-            }
-          } else {
-            selectedButton.value = currentNav.down;
-          }
-          break;
 
-        case "ArrowLeft":
+        if (currentNav.horizontalMode === "preview") {
-          if (!currentNav.left) return;
+          nextButton.value = currentNav.right;
+        } else {
+          selectedButton.value = currentNav.right;
+        }
+        break;
 
-          if (currentNav.horizontalMode === "preview") {
+      case "Enter":
-            nextButton.value = currentNav.left;
+      case " ":
-          } else {
+        onButtonClick?.(selectedButton.value);
-            selectedButton.value = currentNav.left;
+        break;
-          }
-          break;
 
-        case "ArrowRight":
+      default:
-          if (!currentNav.right) return;
+        return;
+    }
 
-          if (currentNav.horizontalMode === "preview") {
+    event.preventDefault();
-            nextButton.value = currentNav.right;
+  };
-          } else {
-            selectedButton.value = currentNav.right;
-          }
-          break;
 
-        case "Enter":
+  onMounted(() => {
-        case " ":
+    window.addEventListener("keydown", handleKeyPress);
-          onButtonClick?.(selectedButton.value);
+  });
-          break;
-      }
 
-      event.preventDefault();
+  onUnmounted(() => {
-    };
+    window.removeEventListener("keydown", handleKeyPress);
-
+  });
-    onMounted(() => {
-      window.addEventListener("keydown", handleKeyPress);
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener("keydown", handleKeyPress);
-    });
-  }
 
   return {
     selectedButton,