From 2fbbd295fc753fee95b23950ebf8d9c7c8838b66 Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Thu, 15 Feb 2024 11:16:00 +0000
Subject: [PATCH] fix arrow navigation behavior (#13040)

---
 .../builder/src/stores/builder/components.js  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index b742331343..d7572dca60 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -29,6 +29,7 @@ import {
 } from "constants/backend"
 import BudiStore from "./BudiStore"
 import { Utils } from "@budibase/frontend-core"
+import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 
 export const INITIAL_COMPONENTS_STATE = {
   components: {},
@@ -662,6 +663,7 @@ export class ComponentStore extends BudiStore {
     const screen = get(selectedScreen)
     const parent = findComponentParent(screen.props, componentId)
     const index = parent?._children.findIndex(x => x._id === componentId)
+    const componentTreeNodes = get(componentTreeNodesStore)
 
     // Check for screen and navigation component edge cases
     const screenComponentId = `${screen._id}-screen`
@@ -680,9 +682,15 @@ export class ComponentStore extends BudiStore {
     if (index > 0) {
       // If sibling before us accepts children, select a descendant
       const previousSibling = parent._children[index - 1]
-      if (previousSibling._children?.length) {
+      if (
+        previousSibling._children?.length &&
+        componentTreeNodes[`nodeOpen-${previousSibling._id}`]
+      ) {
         let target = previousSibling
-        while (target._children?.length) {
+        while (
+          target._children?.length &&
+          componentTreeNodes[`nodeOpen-${target._id}`]
+        ) {
           target = target._children[target._children.length - 1]
         }
         return target._id
@@ -703,6 +711,7 @@ export class ComponentStore extends BudiStore {
     const screen = get(selectedScreen)
     const parent = findComponentParent(screen.props, componentId)
     const index = parent?._children.findIndex(x => x._id === componentId)
+    const componentTreeNodes = get(componentTreeNodesStore)
 
     // Check for screen and navigation component edge cases
     const screenComponentId = `${screen._id}-screen`
@@ -712,7 +721,11 @@ export class ComponentStore extends BudiStore {
     }
 
     // If we have children, select first child
-    if (component._children?.length) {
+    if (
+      component._children?.length &&
+      (state.selectedComponentId === navComponentId ||
+        componentTreeNodes[`nodeOpen-${component._id}`])
+    ) {
       return component._children[0]._id
     } else if (!parent) {
       return null