From 1394a4159903ca35e0981251a83c5931d3502251 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Tue, 1 Aug 2023 06:41:14 -0700
Subject: [PATCH] Fix subtile bug with keyboard controls

Summary:
The code used the hovered node and selected node somewhere inconsistently for keyboard controls, this led to subitle bugs where if you moused over the next keybaord jump point would be the hovered node sometimes. This straightens it all out

Changelog: [UIDebugger] Fixed bug with keyboard tree controls

Reviewed By: aigoncharov

Differential Revision: D47832249

fbshipit-source-id: 7697c97a817ed5b70250c0c4f12fc1c59bdb96b9
---
 .../components/tree/useKeyboardControls.tsx   | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/tree/useKeyboardControls.tsx b/desktop/plugins/public/ui-debugger/components/tree/useKeyboardControls.tsx
index f38a76787..b5302a2ea 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/useKeyboardControls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/useKeyboardControls.tsx
@@ -20,7 +20,7 @@ export type MillisSinceEpoch = number;
 export function useKeyboardControls(
   treeNodes: TreeNode[],
   rowVirtualizer: Virtualizer<HTMLDivElement, Element>,
-  selectedNode: Id | undefined,
+  selectedNodeId: Id | undefined,
   hoveredNodeId: Id | undefined,
   onSelectNode: OnSelectNode,
   onHoverNode: (...id: Id[]) => void,
@@ -32,7 +32,9 @@ export function useKeyboardControls(
 
   useEffect(() => {
     const listener = (event: KeyboardEvent) => {
-      const hoveredNode = treeNodes.find((item) => item.id === hoveredNodeId);
+      const kbTargetNodeId = selectedNodeId ?? hoveredNodeId;
+      const kbTargetNode = treeNodes.find((item) => item.id === kbTargetNodeId);
+
       switch (event.key) {
         case 'Enter': {
           if (hoveredNodeId != null) {
@@ -44,31 +46,32 @@ export function useKeyboardControls(
 
         case 'ArrowRight':
           event.preventDefault();
-          if (hoveredNode) {
-            if (hoveredNode.isExpanded) {
+          if (kbTargetNode) {
+            if (kbTargetNode.isExpanded) {
               moveSelectedNodeUpOrDown(
                 'ArrowDown',
                 treeNodes,
                 rowVirtualizer,
-                hoveredNodeId,
-                selectedNode,
+                kbTargetNode.id,
+                selectedNodeId,
                 onSelectNode,
                 onHoverNode,
                 isUsingKBToScrollUntill,
               );
             } else {
-              onExpandNode(hoveredNode.id);
+              onExpandNode(kbTargetNode.id);
             }
           }
           break;
         case 'ArrowLeft': {
           event.preventDefault();
-          if (hoveredNode) {
-            if (hoveredNode.isExpanded) {
-              onCollapseNode(hoveredNode.id);
+
+          if (kbTargetNode) {
+            if (kbTargetNode.isExpanded) {
+              onCollapseNode(kbTargetNode.id);
             } else {
               const parentIdx = treeNodes.findIndex(
-                (treeNode) => treeNode.id === hoveredNode.parent,
+                (treeNode) => treeNode.id === kbTargetNode.parent,
               );
               moveSelectedNodeViaKeyBoard(
                 parentIdx,
@@ -92,7 +95,7 @@ export function useKeyboardControls(
             treeNodes,
             rowVirtualizer,
             hoveredNodeId,
-            selectedNode,
+            selectedNodeId,
             onSelectNode,
             onHoverNode,
             isUsingKBToScrollUntill,
@@ -108,7 +111,7 @@ export function useKeyboardControls(
   }, [
     treeNodes,
     onSelectNode,
-    selectedNode,
+    selectedNodeId,
     isUsingKBToScrollUntill,
     onExpandNode,
     onCollapseNode,