From 37ce53945ebfab6f808308f46aa0ad8563cb2983 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Fri, 15 Nov 2024 23:45:25 +0100
Subject: [PATCH] fix(ui-mode): fix issue when updating state while rendering
 (#33634)

---
 .../trace-viewer/src/ui/uiModeTestListView.tsx  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/trace-viewer/src/ui/uiModeTestListView.tsx b/packages/trace-viewer/src/ui/uiModeTestListView.tsx
index a6cb82fb8a..1d6ddd850c 100644
--- a/packages/trace-viewer/src/ui/uiModeTestListView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeTestListView.tsx
@@ -99,11 +99,17 @@ export const TestListView: React.FC<{
       setSelectedTreeItemId(selectedTreeItem.id);
   }, [runningState, setSelectedTreeItemId, testTree, collapseAllCount, setCollapseAllCount, requestedCollapseAllCount, expandAllCount, setExpandAllCount, requestedExpandAllCount, treeState, setTreeState]);
 
-  // Compute selected item.
-  const { selectedTreeItem } = React.useMemo(() => {
+  // Compute selected item
+  const selectedTreeItem = React.useMemo(() => {
+    if (!selectedTreeItemId)
+      return undefined;
+    return testTree.treeItemById(selectedTreeItemId);
+  }, [selectedTreeItemId, testTree]);
+
+  // Handle selection effects separately
+  React.useEffect(() => {
     if (!testModel)
-      return { selectedTreeItem: undefined };
-    const selectedTreeItem = selectedTreeItemId ? testTree.treeItemById(selectedTreeItemId) : undefined;
+      return;
     const testFile = itemLocation(selectedTreeItem, testModel);
     let selectedTest: reporterTypes.TestCase | undefined;
     if (selectedTreeItem?.kind === 'test')
@@ -111,8 +117,7 @@ export const TestListView: React.FC<{
     else if (selectedTreeItem?.kind === 'case' && selectedTreeItem.tests.length === 1)
       selectedTest = selectedTreeItem.tests[0];
     onItemSelected({ treeItem: selectedTreeItem, testCase: selectedTest, testFile });
-    return { selectedTreeItem };
-  }, [onItemSelected, selectedTreeItemId, testModel, testTree]);
+  }, [testModel, selectedTreeItem, onItemSelected]);
 
   // Update watch all.
   React.useEffect(() => {