From 36838f05d3312b85271e32e74d933dcec1466139 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 10 Mar 2022 09:41:06 +0100
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=F0=9F=90=9B=20Variables=20butto?=
 =?UTF-8?q?n=20in=20text=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx     | 1 +
 apps/builder/components/shared/VariableSearchInput.tsx       | 2 +-
 apps/builder/playwright/tests/bubbles/text.spec.ts           | 5 +++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
index 886ab9b436f..5dab8f0e159 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
+++ b/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}
diff --git a/apps/builder/components/shared/VariableSearchInput.tsx b/apps/builder/components/shared/VariableSearchInput.tsx
index af1a9f6d2e8..317e8fc04fc 100644
--- a/apps/builder/components/shared/VariableSearchInput.tsx
+++ b/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])
 
diff --git a/apps/builder/playwright/tests/bubbles/text.spec.ts b/apps/builder/playwright/tests/bubbles/text.spec.ts
index 8c03109db93..0aee64ea21b 100644
--- a/apps/builder/playwright/tests/bubbles/text.spec.ts
+++ b/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')