From 5ddaaf0c0e091153b78a963b2cfc956ddb6cc806 Mon Sep 17 00:00:00 2001
From: Andrew <andrekravchenko1994@mail.ru>
Date: Thu, 9 Nov 2023 16:32:28 +0300
Subject: [PATCH] Fix focus navigation while fetching nested nodes

---
 src/focus-store.ts               |  9 +++++++--
 src/handle-arrow/handle-arrow.ts | 15 ++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/focus-store.ts b/src/focus-store.ts
index 5641b04..13eeeda 100644
--- a/src/focus-store.ts
+++ b/src/focus-store.ts
@@ -389,15 +389,20 @@ export default function createFocusStore({
   }
 
   function handleArrow(arrow: Arrow) {
-    const newState = handleArrowUtil({
+    const { newState, prevState } = handleArrowUtil({
       focusState: currentState,
       arrow,
-    });
+    }) || {};
 
     if (!newState) {
       return;
     }
 
+    if (prevState !== currentState) {
+      handleArrow(arrow);
+      return;
+    }
+
     if (newState.interactionMode !== 'lrud') {
       newState.interactionMode = 'lrud';
     }
diff --git a/src/handle-arrow/handle-arrow.ts b/src/handle-arrow/handle-arrow.ts
index 6851d58..65a04e1 100644
--- a/src/handle-arrow/handle-arrow.ts
+++ b/src/handle-arrow/handle-arrow.ts
@@ -8,10 +8,15 @@ interface HandleArrowOptions {
   arrow: Arrow;
 }
 
+type HandleArrowResult = {
+  prevState: FocusState;
+  newState: FocusState | null;
+} | null;
+
 export default function handleArrow({
   focusState,
   arrow,
-}: HandleArrowOptions): FocusState | null {
+}: HandleArrowOptions): HandleArrowResult {
   const orientation: Orientation =
     arrow === 'right' || arrow === 'left' ? 'horizontal' : 'vertical';
   const direction: Direction =
@@ -34,15 +39,17 @@ export default function handleArrow({
   if (!navigationStyle) {
     return null;
   } else if (navigationStyle.style === 'default') {
-    return defaultNavigation({
+    const newState = defaultNavigation({
       arrow,
       focusState,
       targetNode: navigationStyle.targetNode,
       direction,
       orientation,
     });
+
+    return { prevState: focusState, newState };
   } else if (navigationStyle.style === 'grid') {
-    return gridNavigation({
+    const newState = gridNavigation({
       arrow,
       focusState,
       focusedNode,
@@ -51,6 +58,8 @@ export default function handleArrow({
       direction,
       orientation,
     });
+
+    return { prevState: focusState, newState };
   }
 
   return null;