From f211a3e29fb5e8d47d8064333fe07da87a968764 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 16 May 2024 15:02:16 +0200
Subject: [PATCH] :bug: Fix select input displaying id instead of label on
 refresh

Closes #1495
---
 apps/builder/src/components/inputs/Select.tsx | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/builder/src/components/inputs/Select.tsx b/apps/builder/src/components/inputs/Select.tsx
index d8b81c0fa..604829ecf 100644
--- a/apps/builder/src/components/inputs/Select.tsx
+++ b/apps/builder/src/components/inputs/Select.tsx
@@ -15,7 +15,7 @@ import {
   IconButton,
   HStack,
 } from '@chakra-ui/react'
-import { useState, useRef, ChangeEvent } from 'react'
+import { useState, useRef, ChangeEvent, useEffect } from 'react'
 import { isDefined } from '@typebot.io/lib'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
@@ -23,14 +23,14 @@ import { ChevronDownIcon, CloseIcon } from '../icons'
 
 const dropdownCloseAnimationDuration = 300
 
-type Item =
-  | string
-  | {
-      icon?: JSX.Element
-      label: string
-      value: string
-      extras?: Record<string, unknown>
-    }
+type RichItem = {
+  icon?: JSX.Element
+  label: string
+  value: string
+  extras?: Record<string, unknown>
+}
+
+type Item = string | RichItem
 
 type Props<T extends Item> = {
   selectedItem?: string
@@ -59,6 +59,18 @@ export const Select = <T extends Item>({
     )
   )
 
+  useEffect(() => {
+    if (!items || typeof items[0] === 'string' || !selectedItem || isTouched)
+      return
+    setInputValue(
+      getItemLabel(
+        (items as readonly RichItem[]).find(
+          (item) => selectedItem === item.value
+        ) ?? selectedItem
+      )
+    )
+  }, [isTouched, items, selectedItem])
+
   const [keyboardFocusIndex, setKeyboardFocusIndex] = useState<
     number | undefined
   >()