diff --git a/apps/builder/src/components/inputs/VariableSearchInput.tsx b/apps/builder/src/components/inputs/VariableSearchInput.tsx index 3e6493098..043e8e066 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) => { setInputValue(e.target.value) if (e.target.value === '') { @@ -244,6 +236,7 @@ export const VariableSearchInput = ({ > {isCreateVariableButtonDisplayed && (