From f8a76f98b94ac4ae780b11ffae54104bbf4da69b Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 17 Apr 2023 15:29:46 +0200
Subject: [PATCH] :bug: (results) Keep focus on current expanded result when
 new ones arrive

Closes #453
---
 .../features/results/components/ResultModal.tsx    |  8 +++++---
 .../results/components/ResultsTableContainer.tsx   | 14 +++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/builder/src/features/results/components/ResultModal.tsx b/apps/builder/src/features/results/components/ResultModal.tsx
index c3792a157..ade0e0493 100644
--- a/apps/builder/src/features/results/components/ResultModal.tsx
+++ b/apps/builder/src/features/results/components/ResultModal.tsx
@@ -15,13 +15,15 @@ import { isDefined } from '@typebot.io/lib'
 import { HeaderIcon } from './HeaderIcon'
 
 type Props = {
-  resultIdx: number | null
+  resultId: string | null
   onClose: () => void
 }
 
-export const ResultModal = ({ resultIdx, onClose }: Props) => {
+export const ResultModal = ({ resultId, onClose }: Props) => {
   const { tableData, resultHeader } = useResults()
-  const result = isDefined(resultIdx) ? tableData[resultIdx] : undefined
+  const result = isDefined(resultId)
+    ? tableData.find((data) => data.id.plainText === resultId)
+    : undefined
 
   const getHeaderValue = (
     val: string | { plainText: string; element?: JSX.Element | undefined }
diff --git a/apps/builder/src/features/results/components/ResultsTableContainer.tsx b/apps/builder/src/features/results/components/ResultsTableContainer.tsx
index 1c8fd9a88..ef3464004 100644
--- a/apps/builder/src/features/results/components/ResultsTableContainer.tsx
+++ b/apps/builder/src/features/results/components/ResultsTableContainer.tsx
@@ -18,21 +18,21 @@ export const ResultsTableContainer = () => {
   const [inspectingLogsResultId, setInspectingLogsResultId] = useState<
     string | null
   >(null)
-  const [expandedResultIndex, setExpandedResultIndex] = useState<number | null>(
-    null
-  )
+  const [expandedResultId, setExpandedResultId] = useState<string | null>(null)
 
   const handleLogsModalClose = () => setInspectingLogsResultId(null)
 
-  const handleResultModalClose = () => setExpandedResultIndex(null)
+  const handleResultModalClose = () => setExpandedResultId(null)
 
   const handleLogOpenIndex = (index: number) => () => {
     if (!results[index]) return
     setInspectingLogsResultId(results[index].id)
   }
 
-  const handleResultExpandIndex = (index: number) => () =>
-    setExpandedResultIndex(index)
+  const handleResultExpandIndex = (index: number) => () => {
+    if (!results[index]) return
+    setExpandedResultId(results[index].id)
+  }
 
   return (
     <Stack pb="28" px={['4', '0']} spacing="4" maxW="1600px" w="full">
@@ -44,7 +44,7 @@ export const ResultsTableContainer = () => {
         />
       )}
       <ResultModal
-        resultIdx={expandedResultIndex}
+        resultId={expandedResultId}
         onClose={handleResultModalClose}
       />