fix(webapp): preserve tree keyboard focus

Author: carderne

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -968,13 +968,10 @@ function TasksTreeView({
     },
   });
 
-  const getInteractiveNodeProps = useCallback(
-    (id: string) => ({
-      ...getNodeProps(id),
-      onClick: () => selectNode(id),
-    }),
-    [getNodeProps, selectNode]
-  );
+  const getInteractiveNodeProps = (id: string) => ({
+    ...getNodeProps(id),
+    onClick: () => selectNode(id),
+  });
 
   return (
     <div className="grid h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden">
@@ -1077,6 +1074,7 @@ function TasksTreeView({
                     ))}
                     <button
                       type="button"
+                      tabIndex={-1}
                       disabled={!node.hasChildren}
                       aria-label={state.expanded ? "Collapse task" : "Expand task"}
                       className={cn(
@@ -1095,6 +1093,7 @@ function TasksTreeView({
                           toggleExpandNode(node.id);
                         }
                         scrollToNode(node.id);
+                        parentRef.current?.focus();
                       }}
                     >
                       {node.hasChildren ? (

apps/webapp/app/routes/storybook.tree-view/route.tsx

@@ -4,7 +4,7 @@ import {
   FolderOpenIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/20/solid";
-import { useCallback, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Input } from "~/components/primitives/Input";
 import type { Tree } from "~/components/primitives/TreeView/TreeView";
@@ -177,13 +177,10 @@ function TreeViewParent({
     },
   });
 
-  const getInteractiveNodeProps = useCallback(
-    (id: string) => ({
-      ...getNodeProps(id),
-      onClick: () => toggleNodeSelection(id),
-    }),
-    [getNodeProps, toggleNodeSelection]
-  );
+  const getInteractiveNodeProps = (id: string) => ({
+    ...getNodeProps(id),
+    onClick: () => toggleNodeSelection(id),
+  });
 
   return (
     <div className="flex w-72 flex-col items-start gap-y-4 p-4">
@@ -226,6 +223,7 @@ function TreeViewParent({
           >
             <button
               type="button"
+              tabIndex={-1}
               aria-label={
                 node.hasChildren
                   ? state.expanded
@@ -238,6 +236,7 @@ function TreeViewParent({
                 e.stopPropagation();
                 toggleExpandNode(node.id);
                 selectNode(node.id, true);
+                parentRef.current?.focus();
               }}
             >
               {node.hasChildren ? (