From 990ff0f4ca72cc54998b378c32e1e18e4a0cbc18 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 20 Jun 2024 11:26:38 +0200
Subject: [PATCH] :ambulance: Fix variable search button input not auto opening

---
 .../components/inputs/VariableSearchInput.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/apps/builder/src/components/inputs/VariableSearchInput.tsx b/apps/builder/src/components/inputs/VariableSearchInput.tsx
index 3e6493098a..043e8e066d 100644
--- a/apps/builder/src/components/inputs/VariableSearchInput.tsx
+++ b/apps/builder/src/components/inputs/VariableSearchInput.tsx
@@ -22,13 +22,7 @@ import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { createId } from '@paralleldrive/cuid2'
 import { Variable } from '@typebot.io/schemas'
-import React, {
-  useState,
-  useRef,
-  ChangeEvent,
-  useEffect,
-  ReactNode,
-} from 'react'
+import React, { useState, useRef, ChangeEvent, ReactNode } from 'react'
 import { byId, isDefined, isNotDefined } from '@typebot.io/lib'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
@@ -63,7 +57,9 @@ export const VariableSearchInput = ({
   ...inputProps
 }: Props) => {
   const focusedItemBgColor = useColorModeValue('gray.200', 'gray.700')
-  const { onOpen, onClose, isOpen } = useDisclosure()
+  const { onOpen, onClose, isOpen } = useDisclosure({
+    defaultIsOpen: autoFocus,
+  })
   const { typebot, createVariable, deleteVariable, updateVariable } =
     useTypebot()
   const variables = typebot?.variables ?? []
@@ -89,10 +85,6 @@ export const VariableSearchInput = ({
     isEnabled: isOpen,
   })
 
-  useEffect(() => {
-    if (autoFocus) onOpen()
-  }, [autoFocus, onOpen])
-
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
     if (e.target.value === '') {
@@ -244,6 +236,7 @@ export const VariableSearchInput = ({
             >
               {isCreateVariableButtonDisplayed && (
                 <Button
+                  as="li"
                   ref={createVariableItemRef}
                   role="menuitem"
                   minH="40px"
@@ -277,6 +270,8 @@ export const VariableSearchInput = ({
                       : idx
                     return (
                       <Button
+                        as="li"
+                        cursor="pointer"
                         ref={(el) => (itemsRef.current[idx] = el)}
                         role="menuitem"
                         minH="40px"