fix(editor): 🐛 Variables button in text editor

apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx

@@ -144,6 +144,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
           rounded="md"
           bgColor="white"
           w="250px"
+          zIndex={10}
         >
           <VariableSearchInput
             onSelectVariable={handleVariableSelected}

apps/builder/components/shared/VariableSearchInput.tsx

@@ -60,7 +60,7 @@ export const VariableSearchInput = ({
 
   useEffect(() => {
     const variable = variables.find((v) => v.name === debouncedInputValue)
-    onSelectVariable(variable)
+    if (variable) onSelectVariable(variable)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedInputValue])
 

apps/builder/playwright/tests/bubbles/text.spec.ts

@@ -49,6 +49,11 @@ test.describe('Text bubble step', () => {
     })
     await page.click('[data-testid="link-button"]')
 
+    await page.press('div[role="textbox"]', 'Shift+Enter')
+    await page.click('button >> text=Variables')
+    await page.fill('[data-testid="variables-input"]', 'test')
+    await page.click('text=Create "test"')
+
     await page.click('text=Preview')
     await expect(
       typebotViewer(page).locator('span.slate-bold >> nth=0')