🐛 (editor) Improve variables dropdown auto focus

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>