🐛 (editor) Improve variables dropdown auto focus

apps/builder/src/components/VariableSearchInput.tsx

@@ -11,21 +11,20 @@ import {
   useColorModeValue,
   PopoverAnchor,
   Portal,
+  Tag,
 } from '@chakra-ui/react'
 import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
 import { useTypebot } from '@/features/editor'
 import cuid from 'cuid'
 import { Variable } from 'models'
 import React, { useState, useRef, ChangeEvent, useEffect } from 'react'
-import { useDebouncedCallback } from 'use-debounce'
+import { byId, isDefined, isNotDefined } from 'utils'
-import { byId, env, isDefined, isNotDefined } from 'utils'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { useParentModal } from '@/features/graph'
 
 type Props = {
   initialVariableId?: string
-  debounceTimeout?: number
+  autoFocus?: boolean
-  isDefaultOpen?: boolean
   onSelectVariable: (
     variable: Pick<Variable, 'id' | 'name'> | undefined
   ) => void
@@ -34,8 +33,7 @@ type Props = {
 export const VariableSearchInput = ({
   initialVariableId,
   onSelectVariable,
-  isDefaultOpen,
+  autoFocus,
-  debounceTimeout = 1000,
   ...inputProps
 }: Props) => {
   const bg = useColorModeValue('gray.200', 'gray.700')
@@ -46,13 +44,6 @@ export const VariableSearchInput = ({
   const [inputValue, setInputValue] = useState(
     variables.find(byId(initialVariableId))?.name ?? ''
   )
-  const debounced = useDebouncedCallback(
-    (value) => {
-      const variable = variables.find((v) => v.name === value)
-      if (variable) onSelectVariable(variable)
-    },
-    env('E2E_TEST') === 'true' ? 0 : debounceTimeout
-  )
   const [filteredItems, setFilteredItems] = useState<Variable[]>(
     variables ?? []
   )
@@ -67,25 +58,17 @@ export const VariableSearchInput = ({
 
   useOutsideClick({
     ref: dropdownRef,
-    handler: onClose,
+    handler: () => onClose,
   })
 
   useEffect(() => {
-    if (isDefaultOpen) onOpen()
+    if (autoFocus) onOpen()
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  useEffect(
-    () => () => {
-      debounced.flush()
-    },
-    [debounced]
-  )
-
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
-    debounced(e.target.value)
     if (e.target.value === '') {
       onSelectVariable(undefined)
       setFilteredItems([...variables.slice(0, 50)])
@@ -104,6 +87,7 @@ export const VariableSearchInput = ({
     setInputValue(variable.name)
     onSelectVariable(variable)
     setKeyboardFocusIndex(undefined)
+    inputRef.current?.blur()
     onClose()
   }
 
@@ -112,6 +96,7 @@ export const VariableSearchInput = ({
     const id = 'v' + cuid()
     onSelectVariable({ id, name: inputValue })
     createVariable({ id, name: inputValue })
+    inputRef.current?.blur()
     onClose()
   }
 
@@ -122,7 +107,6 @@ export const VariableSearchInput = ({
       setFilteredItems(filteredItems.filter((item) => item.id !== variable.id))
       if (variable.name === inputValue) {
         setInputValue('')
-        debounced('')
       }
     }
 
@@ -147,7 +131,12 @@ export const VariableSearchInput = ({
     if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
       if (keyboardFocusIndex === 0 && isCreateVariableButtonDisplayed)
         handleCreateNewVariableClick()
-      else handleVariableNameClick(filteredItems[keyboardFocusIndex])()
+      else
+        handleVariableNameClick(
+          filteredItems[
+            keyboardFocusIndex - (isCreateVariableButtonDisplayed ? 1 : 0)
+          ]
+        )()
       return setKeyboardFocusIndex(undefined)
     }
     if (e.key === 'ArrowDown') {
@@ -199,6 +188,7 @@ export const VariableSearchInput = ({
             role="menu"
             w="inherit"
             shadow="lg"
+            onMouseDown={(e) => e.stopPropagation()}
           >
             {isCreateVariableButtonDisplayed && (
               <Button
@@ -215,7 +205,10 @@ export const VariableSearchInput = ({
                 leftIcon={<PlusIcon />}
                 bgColor={keyboardFocusIndex === 0 ? bg : 'transparent'}
               >
-                Create &quot;{inputValue}&quot;
+                Create
+                <Tag colorScheme="orange" ml="1">
+                  {inputValue}
+                </Tag>
               </Button>
             )}
             {filteredItems.length > 0 && (
@@ -230,7 +223,6 @@ export const VariableSearchInput = ({
                       role="menuitem"
                       minH="40px"
                       key={idx}
-                      onMouseDown={(e) => e.stopPropagation()}
                       onClick={handleVariableNameClick(item)}
                       fontSize="16px"
                       fontWeight="normal"

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/TextBubbleEditor.tsx

@@ -163,7 +163,7 @@ const TextBubbleEditorContent = ({
           <VariableSearchInput
             onSelectVariable={handleVariableSelected}
             placeholder="Search for a variable"
-            isDefaultOpen
+            autoFocus
           />
         </Flex>
       )}

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/ToolBar.tsx

@@ -27,6 +27,7 @@ type Props = {
 export const ToolBar = ({ onVariablesButtonClick, ...props }: Props) => {
   const editor = usePlateEditorRef()
   const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation()
     e.preventDefault()
     onVariablesButtonClick()
   }

apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts

@@ -48,7 +48,7 @@ test.describe('Text bubble block', () => {
     await page.press('div[role="textbox"]', 'Shift+Enter')
     await page.click('button[aria-label="Insert variable"]')
     await page.fill('[data-testid="variables-input"]', 'test')
-    await page.click('text=Create "test"')
+    await page.getByRole('menuitem', { name: 'Create test' }).click()
 
     await page.click('text=Preview')
     await expect(

apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts

@@ -169,5 +169,5 @@ const fillInSpreadsheetInfo = async (page: Page) => {
 
 const createNewVar = async (page: Page, name: string) => {
   await page.fill('input[placeholder="Select a variable"] >> nth=-1', name)
-  await page.click(`text=Create "${name}"`)
+  await page.getByRole('menuitem', { name: `Create ${name}` }).click()
 }

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/ResponseMappingInputs.tsx

@@ -8,7 +8,6 @@ export const DataVariableInputs = ({
   item,
   onItemChange,
   dataItems,
-  debounceTimeout,
 }: TableListItemProps<ResponseVariableMapping> & { dataItems: string[] }) => {
   const handleBodyPathChange = (bodyPath: string) =>
     onItemChange({ ...item, bodyPath })
@@ -24,7 +23,6 @@ export const DataVariableInputs = ({
           value={item.bodyPath}
           onValueChange={handleBodyPathChange}
           placeholder="Select the data"
-          debounceTimeout={debounceTimeout}
           withVariableButton
         />
       </FormControl>
@@ -34,7 +32,6 @@ export const DataVariableInputs = ({
           onSelectVariable={handleVariableChange}
           placeholder="Search for a variable"
           initialVariableId={item.variableId}
-          debounceTimeout={debounceTimeout}
         />
       </FormControl>
     </Stack>

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/VariableForTestInputs.tsx

@@ -23,7 +23,6 @@ export const VariableForTestInputs = ({
           id={'name' + item.id}
           initialVariableId={item.variableId}
           onSelectVariable={handleVariableSelect}
-          debounceTimeout={debounceTimeout}
         />
       </FormControl>
       <FormControl>

apps/builder/src/features/blocks/logic/setVariable/setVariable.spec.ts

@@ -18,11 +18,11 @@ test.describe('Set variable block', () => {
     await page.goto(`/typebots/${typebotId}/edit`)
     await page.click('text=Type a number...')
     await page.fill('input[placeholder="Select a variable"] >> nth=-1', 'Num')
-    await page.click('text=Create "Num"')
+    await page.getByRole('menuitem', { name: 'Create Num' }).click()
 
     await page.click('text=Click to edit... >> nth = 0')
     await page.fill('input[placeholder="Select a variable"] >> nth=-1', 'Total')
-    await page.click('text=Create "Total"')
+    await page.getByRole('menuitem', { name: 'Create Total' }).click()
     await page.fill('textarea', '1000 * {{Num}}')
 
     await page.click('text=Click to edit...', { force: true })
@@ -30,7 +30,7 @@ test.describe('Set variable block', () => {
       'input[placeholder="Select a variable"] >> nth=-1',
       'Custom var'
     )
-    await page.click('text=Create "Custom var"')
+    await page.getByRole('menuitem', { name: 'Create Custom var' }).click()
     await page.fill('textarea', 'Custom value')
 
     await page.click('text=Click to edit...', { force: true })
@@ -38,7 +38,7 @@ test.describe('Set variable block', () => {
       'input[placeholder="Select a variable"] >> nth=-1',
       'Addition'
     )
-    await page.click('text=Create "Addition"')
+    await page.getByRole('menuitem', { name: 'Create Addition' }).click()
     await page.fill('textarea', '1000 + {{Total}}')
 
     await page.click('text=Preview')

apps/builder/src/features/variables/components/VariablesButton.tsx

@@ -38,7 +38,7 @@ export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
           onSelectVariable={onSelectVariable}
           placeholder="Search for a variable"
           shadow="lg"
-          isDefaultOpen
+          autoFocus
         />
       </PopoverContent>
     </Popover>