🐛 (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(