From 2c1f69439bbfa23ea3c93efaa71d6d7732d06f86 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 10 Mar 2022 11:34:55 +0100
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=F0=9F=9A=B8=20Improve=20and=20?=
 =?UTF-8?q?unify=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/settings/MetadataForm.tsx      | 13 ++--
 .../components/shared/DebouncedInput.tsx      | 45 -------------
 .../components/shared/DebouncedTextarea.tsx   | 39 -----------
 .../VideoUploadContent.tsx                    |  6 +-
 .../bodies/ChoiceInputSettingsBody.tsx        |  6 +-
 .../bodies/CodeSettings.tsx                   |  7 +-
 .../ConditionSettingsBody/ComparisonsItem.tsx |  6 +-
 .../bodies/DateInputSettingsBody.tsx          | 14 ++--
 .../bodies/EmailInputSettingsBody.tsx         | 15 ++---
 .../bodies/GoogleAnalyticsSettings.tsx        | 23 +++----
 .../CellWithValueStack.tsx                    |  6 +-
 .../bodies/NumberInputSettingsBody.tsx        | 10 +--
 .../PhoneNumberSettingsBody.tsx               | 15 ++---
 .../bodies/RedirectSettings.tsx               |  6 +-
 .../SendEmailSettings/SendEmailSettings.tsx   | 25 +++----
 .../SendEmailSettings/SmtpConfigForm.tsx      | 27 +++++---
 .../bodies/SetVariableSettings.tsx            |  6 +-
 .../bodies/TextInputSettingsBody.tsx          | 10 +--
 .../bodies/UrlInputSettingsBody.tsx           | 15 ++---
 .../bodies/WebhookSettings/KeyValueInputs.tsx | 10 +--
 .../WebhookSettings/VariableForTestInputs.tsx |  6 +-
 .../WebhookSettings/WebhookSettings.tsx       |  6 +-
 .../ImageUploadContent/ImageUploadContent.tsx |  6 +-
 .../components/shared/Textbox/Input.tsx       |  7 ++
 .../TextBox.tsx}                              | 67 ++++++++++++-------
 .../components/shared/Textbox/Textarea.tsx    |  7 ++
 .../components/shared/Textbox/index.tsx       |  2 +
 .../InputWithVariableButton.tsx               | 10 ---
 .../TextareaWithVariableButton.tsx            | 10 ---
 .../TextboxWithVariableButton/index.tsx       |  2 -
 apps/builder/services/utils/index.ts          |  1 +
 apps/builder/services/utils/useRefState.ts    | 10 +++
 32 files changed, 187 insertions(+), 251 deletions(-)
 delete mode 100644 apps/builder/components/shared/DebouncedInput.tsx
 delete mode 100644 apps/builder/components/shared/DebouncedTextarea.tsx
 create mode 100644 apps/builder/components/shared/Textbox/Input.tsx
 rename apps/builder/components/shared/{TextboxWithVariableButton/TextboxWithVariableButton.tsx => Textbox/TextBox.tsx} (73%)
 create mode 100644 apps/builder/components/shared/Textbox/Textarea.tsx
 create mode 100644 apps/builder/components/shared/Textbox/index.tsx
 delete mode 100644 apps/builder/components/shared/TextboxWithVariableButton/InputWithVariableButton.tsx
 delete mode 100644 apps/builder/components/shared/TextboxWithVariableButton/TextareaWithVariableButton.tsx
 delete mode 100644 apps/builder/components/shared/TextboxWithVariableButton/index.tsx
 create mode 100644 apps/builder/services/utils/useRefState.ts

diff --git a/apps/builder/components/settings/MetadataForm.tsx b/apps/builder/components/settings/MetadataForm.tsx
index 2ce264da6..e64c82000 100644
--- a/apps/builder/components/settings/MetadataForm.tsx
+++ b/apps/builder/components/settings/MetadataForm.tsx
@@ -9,10 +9,7 @@ import {
   PopoverContent,
 } from '@chakra-ui/react'
 import { ImageUploadContent } from 'components/shared/ImageUploadContent'
-import {
-  InputWithVariableButton,
-  TextareaWithVariableButton,
-} from 'components/shared/TextboxWithVariableButton'
+import { Input, Textarea } from 'components/shared/Textbox'
 
 type Props = {
   typebotName: string
@@ -89,9 +86,9 @@ export const MetadataForm = ({
         <FormLabel mb="0" htmlFor="title">
           Title:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="title"
-          initialValue={metadata.title ?? typebotName}
+          defaultValue={metadata.title ?? typebotName}
           onChange={handleTitleChange}
         />
       </Stack>
@@ -99,9 +96,9 @@ export const MetadataForm = ({
         <FormLabel mb="0" htmlFor="description">
           Description:
         </FormLabel>
-        <TextareaWithVariableButton
+        <Textarea
           id="description"
-          initialValue={metadata.description}
+          defaultValue={metadata.description}
           onChange={handleDescriptionChange}
         />
       </Stack>
diff --git a/apps/builder/components/shared/DebouncedInput.tsx b/apps/builder/components/shared/DebouncedInput.tsx
deleted file mode 100644
index 642603f2f..000000000
--- a/apps/builder/components/shared/DebouncedInput.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Input, InputProps } from '@chakra-ui/react'
-import {
-  ChangeEvent,
-  ForwardedRef,
-  forwardRef,
-  useEffect,
-  useState,
-} from 'react'
-import { useDebounce } from 'use-debounce'
-
-type Props = Omit<InputProps, 'onChange' | 'value'> & {
-  initialValue: string
-  onChange: (debouncedValue: string) => void
-}
-
-export const DebouncedInput = forwardRef(
-  (
-    { onChange, initialValue, ...props }: Props,
-    ref: ForwardedRef<HTMLInputElement>
-  ) => {
-    const [currentValue, setCurrentValue] = useState(initialValue)
-    const [debouncedValue] = useDebounce(
-      currentValue,
-      process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
-    )
-
-    useEffect(() => {
-      if (debouncedValue === initialValue) return
-      onChange(debouncedValue)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [debouncedValue])
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
-      setCurrentValue(e.target.value)
-
-    return (
-      <Input
-        {...props}
-        ref={ref}
-        value={currentValue}
-        onChange={handleChange}
-      />
-    )
-  }
-)
diff --git a/apps/builder/components/shared/DebouncedTextarea.tsx b/apps/builder/components/shared/DebouncedTextarea.tsx
deleted file mode 100644
index 074140e08..000000000
--- a/apps/builder/components/shared/DebouncedTextarea.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Textarea, TextareaProps } from '@chakra-ui/react'
-import { ChangeEvent, useEffect, useState } from 'react'
-import { useDebounce } from 'use-debounce'
-
-type Props = Omit<TextareaProps, 'onChange' | 'value'> & {
-  initialValue: string
-  onChange: (debouncedValue: string) => void
-}
-
-export const DebouncedTextarea = ({
-  onChange,
-  initialValue,
-  ...props
-}: Props) => {
-  const [currentValue, setCurrentValue] = useState(initialValue)
-  const [debouncedValue] = useDebounce(
-    currentValue,
-    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
-  )
-
-  useEffect(() => {
-    if (debouncedValue === initialValue) return
-    onChange(debouncedValue)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue])
-
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setCurrentValue(e.target.value)
-  }
-
-  return (
-    <Textarea
-      {...props}
-      value={currentValue}
-      onChange={handleChange}
-      resize={'vertical'}
-    />
-  )
-}
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx
index 0693d62e0..baea9a3de 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx
@@ -1,5 +1,5 @@
 import { Stack, Text } from '@chakra-ui/react'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox/Input'
 import { VideoBubbleContent, VideoBubbleContentType } from 'models'
 import urlParser from 'js-video-url-parser/lib/base'
 import 'js-video-url-parser/lib/provider/vimeo'
@@ -24,9 +24,9 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
   }
   return (
     <Stack p="2">
-      <InputWithVariableButton
+      <Input
         placeholder="Paste the video link..."
-        initialValue={content?.url ?? ''}
+        defaultValue={content?.url ?? ''}
         onChange={handleUrlChange}
       />
       <Text fontSize="sm" color="gray.400" textAlign="center">
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
index 9c3c808e0..ea2ad7e0e 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { ChoiceInputOptions, Variable } from 'models'
 import React from 'react'
@@ -34,9 +34,9 @@ export const ChoiceInputSettingsBody = ({
           <FormLabel mb="0" htmlFor="button">
             Button label:
           </FormLabel>
-          <DebouncedInput
+          <Input
             id="button"
-            initialValue={options?.buttonLabel ?? 'Send'}
+            defaultValue={options?.buttonLabel ?? 'Send'}
             onChange={handleButtonLabelChange}
           />
         </Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/CodeSettings.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/CodeSettings.tsx
index 14073d005..47dda78d5 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/CodeSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/CodeSettings.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, Stack, Text } from '@chakra-ui/react'
 import { CodeEditor } from 'components/shared/CodeEditor'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { Input } from 'components/shared/Textbox'
 import { CodeOptions } from 'models'
 import React from 'react'
 
@@ -20,10 +20,11 @@ export const CodeSettings = ({ options, onOptionsChange }: Props) => {
         <FormLabel mb="0" htmlFor="name">
           Name:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="name"
-          initialValue={options.name}
+          defaultValue={options.name}
           onChange={handleNameChange}
+          withVariableButton={false}
         />
       </Stack>
       <Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
index 0802251cf..7f3f36ed5 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
@@ -1,6 +1,6 @@
 import { Stack } from '@chakra-ui/react'
 import { DropdownList } from 'components/shared/DropdownList'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox/Input'
 import { TableListItemProps } from 'components/shared/TableList'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { Comparison, Variable, ComparisonOperators } from 'models'
@@ -39,8 +39,8 @@ export const ComparisonItem = ({
         placeholder="Select an operator"
       />
       {item.comparisonOperator !== ComparisonOperators.IS_SET && (
-        <InputWithVariableButton
-          initialValue={item.value ?? ''}
+        <Input
+          defaultValue={item.value ?? ''}
           onChange={handleChangeValue}
           placeholder="Type a value..."
         />
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
index 09f73861e..47f9be93c 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { DateInputOptions, Variable } from 'models'
 import React from 'react'
@@ -46,9 +46,9 @@ export const DateInputSettingsBody = ({
           <FormLabel mb="0" htmlFor="from">
             From label:
           </FormLabel>
-          <DebouncedInput
+          <Input
             id="from"
-            initialValue={options.labels.from}
+            defaultValue={options.labels.from}
             onChange={handleFromChange}
           />
         </Stack>
@@ -58,9 +58,9 @@ export const DateInputSettingsBody = ({
           <FormLabel mb="0" htmlFor="to">
             To label:
           </FormLabel>
-          <DebouncedInput
+          <Input
             id="to"
-            initialValue={options.labels.to}
+            defaultValue={options.labels.to}
             onChange={handleToChange}
           />
         </Stack>
@@ -69,9 +69,9 @@ export const DateInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="button">
           Button label:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="button"
-          initialValue={options.labels.button}
+          defaultValue={options.labels.button}
           onChange={handleButtonLabelChange}
         />
       </Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
index d7400cdb6..9f17bd52a 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
@@ -1,6 +1,5 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { EmailInputOptions, Variable } from 'models'
 import React from 'react'
@@ -29,9 +28,9 @@ export const EmailInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="placeholder">
           Placeholder:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="placeholder"
-          initialValue={options.labels.placeholder}
+          defaultValue={options.labels.placeholder}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -39,9 +38,9 @@ export const EmailInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="button">
           Button label:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="button"
-          initialValue={options.labels.button}
+          defaultValue={options.labels.button}
           onChange={handleButtonLabelChange}
         />
       </Stack>
@@ -49,9 +48,9 @@ export const EmailInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="retry">
           Retry message:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="retry"
-          initialValue={options.retryMessageContent}
+          defaultValue={options.retryMessageContent}
           onChange={handleRetryMessageChange}
         />
       </Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
index c6613e3ae..22548951b 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
@@ -9,8 +9,7 @@ import {
   Stack,
   Tag,
 } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { GoogleAnalyticsOptions } from 'models'
 import React from 'react'
 
@@ -47,9 +46,9 @@ export const GoogleAnalyticsSettings = ({
         <FormLabel mb="0" htmlFor="tracking-id">
           Tracking ID:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="tracking-id"
-          initialValue={options?.trackingId ?? ''}
+          defaultValue={options?.trackingId ?? ''}
           placeholder="G-123456..."
           onChange={handleTrackingIdChange}
         />
@@ -58,9 +57,9 @@ export const GoogleAnalyticsSettings = ({
         <FormLabel mb="0" htmlFor="category">
           Event category:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="category"
-          initialValue={options?.category ?? ''}
+          defaultValue={options?.category ?? ''}
           placeholder="Example: Typebot"
           onChange={handleCategoryChange}
         />
@@ -69,9 +68,9 @@ export const GoogleAnalyticsSettings = ({
         <FormLabel mb="0" htmlFor="action">
           Event action:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="action"
-          initialValue={options?.action ?? ''}
+          defaultValue={options?.action ?? ''}
           placeholder="Example: Submit email"
           onChange={handleActionChange}
         />
@@ -91,9 +90,9 @@ export const GoogleAnalyticsSettings = ({
               <FormLabel mb="0" htmlFor="label">
                 Event label <Tag>Optional</Tag>:
               </FormLabel>
-              <InputWithVariableButton
+              <Input
                 id="label"
-                initialValue={options?.label ?? ''}
+                defaultValue={options?.label ?? ''}
                 placeholder="Example: Campaign Z"
                 onChange={handleLabelChange}
               />
@@ -102,9 +101,9 @@ export const GoogleAnalyticsSettings = ({
               <FormLabel mb="0" htmlFor="value">
                 Event value <Tag>Optional</Tag>:
               </FormLabel>
-              <InputWithVariableButton
+              <Input
                 id="value"
-                initialValue={options?.value?.toString() ?? ''}
+                defaultValue={options?.value?.toString() ?? ''}
                 placeholder="Example: 0"
                 onChange={handleValueChange}
               />
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx
index f222143aa..120f3bc54 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx
@@ -1,6 +1,6 @@
 import { Stack } from '@chakra-ui/react'
 import { DropdownList } from 'components/shared/DropdownList'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox/Input'
 import { TableListItemProps } from 'components/shared/TableList'
 import { Cell } from 'models'
 
@@ -25,8 +25,8 @@ export const CellWithValueStack = ({
         items={columns}
         placeholder="Select a column"
       />
-      <InputWithVariableButton
-        initialValue={item.value ?? ''}
+      <Input
+        defaultValue={item.value ?? ''}
         onChange={handleValueChange}
         placeholder="Type a value..."
       />
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
index 16d52c726..9b8aa3023 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, HStack, Stack } from '@chakra-ui/react'
 import { SmartNumberInput } from 'components/shared/SmartNumberInput'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { NumberInputOptions, Variable } from 'models'
 import React from 'react'
@@ -35,9 +35,9 @@ export const NumberInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="placeholder">
           Placeholder:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="placeholder"
-          initialValue={options.labels.placeholder}
+          defaultValue={options.labels.placeholder}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -45,9 +45,9 @@ export const NumberInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="button">
           Button label:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="button"
-          initialValue={options?.labels?.button ?? 'Send'}
+          defaultValue={options?.labels?.button ?? 'Send'}
           onChange={handleButtonLabelChange}
         />
       </Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx
index f1b136467..cff0d19d0 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx
@@ -1,6 +1,5 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { PhoneNumberInputOptions, Variable } from 'models'
 import React from 'react'
@@ -32,9 +31,9 @@ export const PhoneNumberSettingsBody = ({
         <FormLabel mb="0" htmlFor="placeholder">
           Placeholder:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="placeholder"
-          initialValue={options.labels.placeholder}
+          defaultValue={options.labels.placeholder}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -42,9 +41,9 @@ export const PhoneNumberSettingsBody = ({
         <FormLabel mb="0" htmlFor="button">
           Button label:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="button"
-          initialValue={options.labels.button}
+          defaultValue={options.labels.button}
           onChange={handleButtonLabelChange}
         />
       </Stack>
@@ -61,9 +60,9 @@ export const PhoneNumberSettingsBody = ({
         <FormLabel mb="0" htmlFor="retry">
           Retry message:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="retry"
-          initialValue={options.retryMessageContent}
+          defaultValue={options.retryMessageContent}
           onChange={handleRetryMessageChange}
         />
       </Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
index e091572ba..83a7a25b9 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { RedirectOptions } from 'models'
 import React from 'react'
 
@@ -21,9 +21,9 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
         <FormLabel mb="0" htmlFor="tracking-id">
           Url:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="tracking-id"
-          initialValue={options.url ?? ''}
+          defaultValue={options.url ?? ''}
           placeholder="Type a URL..."
           onChange={handleUrlChange}
         />
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
index e0f501508..5e00bcb41 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
@@ -1,9 +1,6 @@
 import { Stack, useDisclosure, Text } from '@chakra-ui/react'
 import { CredentialsDropdown } from 'components/shared/CredentialsDropdown'
-import {
-  InputWithVariableButton,
-  TextareaWithVariableButton,
-} from 'components/shared/TextboxWithVariableButton'
+import { Input, Textarea } from 'components/shared/Textbox'
 import { CredentialsType, SendEmailOptions } from 'models'
 import React, { useState } from 'react'
 import { SmtpConfigModal } from './SmtpConfigModal'
@@ -80,43 +77,43 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
       </Stack>
       <Stack>
         <Text>To: </Text>
-        <InputWithVariableButton
+        <Input
           onChange={handleToChange}
-          initialValue={options.recipients.join(', ')}
+          defaultValue={options.recipients.join(', ')}
           placeholder="email1@gmail.com, email2@gmail.com"
         />
       </Stack>
       <Stack>
         <Text>Cc: </Text>
-        <InputWithVariableButton
+        <Input
           onChange={handleCcChange}
-          initialValue={options.cc?.join(', ') ?? ''}
+          defaultValue={options.cc?.join(', ') ?? ''}
           placeholder="email1@gmail.com, email2@gmail.com"
         />
       </Stack>
       <Stack>
         <Text>Bcc: </Text>
-        <InputWithVariableButton
+        <Input
           onChange={handleBccChange}
-          initialValue={options.bcc?.join(', ') ?? ''}
+          defaultValue={options.bcc?.join(', ') ?? ''}
           placeholder="email1@gmail.com, email2@gmail.com"
         />
       </Stack>
       <Stack>
         <Text>Subject: </Text>
-        <InputWithVariableButton
+        <Input
           data-testid="subject-input"
           onChange={handleSubjectChange}
-          initialValue={options.subject ?? ''}
+          defaultValue={options.subject ?? ''}
         />
       </Stack>
       <Stack>
         <Text>Body: </Text>
-        <TextareaWithVariableButton
+        <Textarea
           data-testid="body-input"
           minH="300px"
           onChange={handleBodyChange}
-          initialValue={options.body ?? ''}
+          defaultValue={options.body ?? ''}
         />
       </Stack>
       <SmtpConfigModal
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx
index 505efaa1a..2beefe730 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx
@@ -1,8 +1,8 @@
 import { FormControl, FormLabel, HStack, Stack } from '@chakra-ui/react'
 import { isDefined } from '@udecode/plate-common'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { SmartNumberInput } from 'components/shared/SmartNumberInput'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { Input } from 'components/shared/Textbox'
 import { SmtpCredentialsData } from 'models'
 import React from 'react'
 
@@ -30,43 +30,48 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
     <Stack as="form" spacing={4}>
       <FormControl isRequired>
         <FormLabel>From email:</FormLabel>
-        <DebouncedInput
-          initialValue={config.from.email ?? ''}
+        <Input
+          defaultValue={config.from.email ?? ''}
           onChange={handleFromEmailChange}
           placeholder="notifications@provider.com"
+          withVariableButton={false}
         />
       </FormControl>
       <FormControl isRequired>
         <FormLabel>From name:</FormLabel>
-        <DebouncedInput
-          initialValue={config.from.name ?? ''}
+        <Input
+          defaultValue={config.from.name ?? ''}
           onChange={handleFromNameChange}
           placeholder="John Smith"
+          withVariableButton={false}
         />
       </FormControl>
       <FormControl isRequired>
         <FormLabel>Host:</FormLabel>
-        <DebouncedInput
-          initialValue={config.host ?? ''}
+        <Input
+          defaultValue={config.host ?? ''}
           onChange={handleHostChange}
           placeholder="mail.provider.com"
+          withVariableButton={false}
         />
       </FormControl>
       <FormControl isRequired>
         <FormLabel>Username / Email:</FormLabel>
-        <DebouncedInput
+        <Input
           type="email"
-          initialValue={config.username ?? ''}
+          defaultValue={config.username ?? ''}
           onChange={handleUsernameChange}
           placeholder="user@provider.com"
+          withVariableButton={false}
         />
       </FormControl>
       <FormControl isRequired>
         <FormLabel>Password:</FormLabel>
-        <DebouncedInput
+        <Input
           type="password"
-          initialValue={config.password ?? ''}
+          defaultValue={config.password ?? ''}
           onChange={handlePasswordChange}
+          withVariableButton={false}
         />
       </FormControl>
       <SwitchWithLabel
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SetVariableSettings.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SetVariableSettings.tsx
index 3266f1dce..c7d367708 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SetVariableSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SetVariableSettings.tsx
@@ -1,5 +1,5 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedTextarea } from 'components/shared/DebouncedTextarea'
+import { Textarea } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { SetVariableOptions, Variable } from 'models'
 import React from 'react'
@@ -31,9 +31,9 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
         <FormLabel mb="0" htmlFor="expression">
           Value / Expression:
         </FormLabel>
-        <DebouncedTextarea
+        <Textarea
           id="expression"
-          initialValue={options.expressionToEvaluate ?? ''}
+          defaultValue={options.expressionToEvaluate ?? ''}
           onChange={handleExpressionChange}
         />
       </Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
index f10ea247d..67a6c88b3 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { TextInputOptions, Variable } from 'models'
 import React from 'react'
@@ -35,9 +35,9 @@ export const TextInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="placeholder">
           Placeholder:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="placeholder"
-          initialValue={options.labels.placeholder}
+          defaultValue={options.labels.placeholder}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -45,9 +45,9 @@ export const TextInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="button">
           Button label:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="button"
-          initialValue={options.labels.button}
+          defaultValue={options.labels.button}
           onChange={handleButtonLabelChange}
         />
       </Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
index 03c22d5ff..9ea4a0c62 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
@@ -1,6 +1,5 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { UrlInputOptions, Variable } from 'models'
 import React from 'react'
@@ -29,9 +28,9 @@ export const UrlInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="placeholder">
           Placeholder:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="placeholder"
-          initialValue={options.labels.placeholder}
+          defaultValue={options.labels.placeholder}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -39,9 +38,9 @@ export const UrlInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="button">
           Button label:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="button"
-          initialValue={options.labels.button}
+          defaultValue={options.labels.button}
           onChange={handleButtonLabelChange}
         />
       </Stack>
@@ -49,9 +48,9 @@ export const UrlInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="retry">
           Retry message:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="retry"
-          initialValue={options.retryMessageContent}
+          defaultValue={options.retryMessageContent}
           onChange={handleRetryMessageChange}
         />
       </Stack>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx
index 8af631cba..0767205c1 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx
@@ -1,5 +1,5 @@
 import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { TableListItemProps } from 'components/shared/TableList'
 import { KeyValue } from 'models'
 
@@ -40,18 +40,18 @@ export const KeyValueInputs = ({
     <Stack p="4" rounded="md" flex="1" borderWidth="1px">
       <FormControl>
         <FormLabel htmlFor={'key' + item.id}>Key:</FormLabel>
-        <InputWithVariableButton
+        <Input
           id={'key' + item.id}
-          initialValue={item.key ?? ''}
+          defaultValue={item.key ?? ''}
           onChange={handleKeyChange}
           placeholder={keyPlaceholder}
         />
       </FormControl>
       <FormControl>
         <FormLabel htmlFor={'value' + item.id}>Value:</FormLabel>
-        <InputWithVariableButton
+        <Input
           id={'value' + item.id}
-          initialValue={item.value ?? ''}
+          defaultValue={item.value ?? ''}
           onChange={handleValueChange}
           placeholder={valuePlaceholder}
         />
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/VariableForTestInputs.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/VariableForTestInputs.tsx
index b564048b8..48936d68b 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/VariableForTestInputs.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/VariableForTestInputs.tsx
@@ -1,6 +1,6 @@
 import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { TableListItemProps } from 'components/shared/TableList'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { VariableForTest, Variable } from 'models'
 
@@ -26,9 +26,9 @@ export const VariableForTestInputs = ({
       </FormControl>
       <FormControl>
         <FormLabel htmlFor={'value' + item.id}>Test value:</FormLabel>
-        <DebouncedInput
+        <Input
           id={'value' + item.id}
-          initialValue={item.value ?? ''}
+          defaultValue={item.value ?? ''}
           onChange={handleValueChange}
         />
       </FormControl>
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
index e23009d16..ff0445a02 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
@@ -12,7 +12,7 @@ import {
   useToast,
   Text,
 } from '@chakra-ui/react'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { useTypebot } from 'contexts/TypebotContext'
 import {
   HttpMethod,
@@ -144,9 +144,9 @@ export const WebhookSettings = ({
   if (!localWebhook) return <Spinner />
   return (
     <Stack spacing={4}>
-      <InputWithVariableButton
+      <Input
         placeholder="Your Webhook URL..."
-        initialValue={localWebhook.url ?? ''}
+        defaultValue={localWebhook.url ?? ''}
         onChange={handleUrlChange}
       />
       <SwitchWithLabel
diff --git a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
index 005e9ff3d..6a0edb03c 100644
--- a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
+++ b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
@@ -5,7 +5,7 @@ import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useDebounce } from 'use-debounce'
-import { InputWithVariableButton } from '../TextboxWithVariableButton'
+import { Input } from '../Textbox'
 
 type Props = {
   url?: string
@@ -105,10 +105,10 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
 
   return (
     <Stack py="2">
-      <InputWithVariableButton
+      <Input
         placeholder={'Paste the image link...'}
         onChange={setImageUrl}
-        initialValue={imageUrl}
+        defaultValue={imageUrl}
       />
     </Stack>
   )
diff --git a/apps/builder/components/shared/Textbox/Input.tsx b/apps/builder/components/shared/Textbox/Input.tsx
new file mode 100644
index 000000000..40f8b686a
--- /dev/null
+++ b/apps/builder/components/shared/Textbox/Input.tsx
@@ -0,0 +1,7 @@
+import { Input as ChakraInput } from '@chakra-ui/react'
+import React from 'react'
+import { TextBox, TextBoxProps } from './TextBox'
+
+export const Input = (props: Omit<TextBoxProps, 'TextBox'>) => (
+  <TextBox TextBox={ChakraInput} {...props} />
+)
diff --git a/apps/builder/components/shared/TextboxWithVariableButton/TextboxWithVariableButton.tsx b/apps/builder/components/shared/Textbox/TextBox.tsx
similarity index 73%
rename from apps/builder/components/shared/TextboxWithVariableButton/TextboxWithVariableButton.tsx
rename to apps/builder/components/shared/Textbox/TextBox.tsx
index 81034fb10..e01dfbe67 100644
--- a/apps/builder/components/shared/TextboxWithVariableButton/TextboxWithVariableButton.tsx
+++ b/apps/builder/components/shared/Textbox/TextBox.tsx
@@ -12,38 +12,49 @@ import {
 } from '@chakra-ui/react'
 import { UserIcon } from 'assets/icons'
 import { Variable } from 'models'
-import React, { useEffect, useRef, useState } from 'react'
-import { useDebounce } from 'use-debounce'
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
+import { useDebouncedCallback } from 'use-debounce'
 import { VariableSearchInput } from '../VariableSearchInput'
 
-export type TextBoxWithVariableButtonProps = {
-  initialValue: string
+export type TextBoxProps = {
   onChange: (value: string) => void
   TextBox:
     | ComponentWithAs<'textarea', TextareaProps>
     | ComponentWithAs<'input', InputProps>
+  withVariableButton?: boolean
 } & Omit<InputProps & TextareaProps, 'onChange'>
 
-export const TextBoxWithVariableButton = ({
-  initialValue,
+export const TextBox = ({
   onChange,
   TextBox,
+  withVariableButton = true,
   ...props
-}: TextBoxWithVariableButtonProps) => {
+}: TextBoxProps) => {
   const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(
     null
   )
-  const [value, setValue] = useState(initialValue)
-  const [debouncedValue] = useDebounce(
-    value,
+  const [carretPosition, setCarretPosition] = useState<number>(0)
+  const [value, setValue] = useState(props.defaultValue)
+  const debounced = useDebouncedCallback(
+    (value) => {
+      onChange(value)
+    },
     process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
   )
-  const [carretPosition, setCarretPosition] = useState<number>(0)
 
-  useEffect(() => {
-    onChange(value)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue])
+  useEffect(
+    () => () => {
+      debounced.flush()
+    },
+    [debounced]
+  )
+
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement & HTMLTextAreaElement>
+  ) => {
+    setValue(e.target.value)
+    debounced(e.target.value)
+  }
 
   const handleVariableSelected = (variable?: Variable) => {
     if (!textBoxRef.current || !variable) return
@@ -56,11 +67,12 @@ export const TextBoxWithVariableButton = ({
       cursorPosition,
       textBoxRef.current.value.length
     )
-    setValue(
+    const newValue =
       textBeforeCursorPosition +
-        `{{${variable.name}}}` +
-        textAfterCursorPosition
-    )
+      `{{${variable.name}}}` +
+      textAfterCursorPosition
+    setValue(newValue)
+    debounced(newValue)
     textBoxRef.current.focus()
     setTimeout(() => {
       if (!textBoxRef.current) return
@@ -75,17 +87,24 @@ export const TextBoxWithVariableButton = ({
     setCarretPosition(textBoxRef.current.selectionStart)
   }
 
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => setValue(e.target.value)
-
+  if (!withVariableButton) {
+    return (
+      <TextBox
+        ref={textBoxRef}
+        onChange={handleChange}
+        bgColor={'white'}
+        value={value}
+        {...props}
+      />
+    )
+  }
   return (
     <HStack spacing={0} align={'flex-end'}>
       <TextBox
         ref={textBoxRef}
+        value={value}
         onKeyUp={handleKeyUp}
         onClick={handleKeyUp}
-        value={value}
         onChange={handleChange}
         bgColor={'white'}
         {...props}
diff --git a/apps/builder/components/shared/Textbox/Textarea.tsx b/apps/builder/components/shared/Textbox/Textarea.tsx
new file mode 100644
index 000000000..bf89a4814
--- /dev/null
+++ b/apps/builder/components/shared/Textbox/Textarea.tsx
@@ -0,0 +1,7 @@
+import { Textarea as ChakraTextarea } from '@chakra-ui/react'
+import React from 'react'
+import { TextBox, TextBoxProps } from './TextBox'
+
+export const Textarea = (props: Omit<TextBoxProps, 'TextBox'>) => (
+  <TextBox TextBox={ChakraTextarea} {...props} />
+)
diff --git a/apps/builder/components/shared/Textbox/index.tsx b/apps/builder/components/shared/Textbox/index.tsx
new file mode 100644
index 000000000..e438e196a
--- /dev/null
+++ b/apps/builder/components/shared/Textbox/index.tsx
@@ -0,0 +1,2 @@
+export { Input } from './Input'
+export { Textarea } from './Textarea'
diff --git a/apps/builder/components/shared/TextboxWithVariableButton/InputWithVariableButton.tsx b/apps/builder/components/shared/TextboxWithVariableButton/InputWithVariableButton.tsx
deleted file mode 100644
index 9d1f63801..000000000
--- a/apps/builder/components/shared/TextboxWithVariableButton/InputWithVariableButton.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Input } from '@chakra-ui/react'
-import React from 'react'
-import {
-  TextBoxWithVariableButton,
-  TextBoxWithVariableButtonProps,
-} from './TextboxWithVariableButton'
-
-export const InputWithVariableButton = (
-  props: Omit<TextBoxWithVariableButtonProps, 'TextBox'>
-) => <TextBoxWithVariableButton TextBox={Input} {...props} />
diff --git a/apps/builder/components/shared/TextboxWithVariableButton/TextareaWithVariableButton.tsx b/apps/builder/components/shared/TextboxWithVariableButton/TextareaWithVariableButton.tsx
deleted file mode 100644
index 4bb9be196..000000000
--- a/apps/builder/components/shared/TextboxWithVariableButton/TextareaWithVariableButton.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Textarea } from '@chakra-ui/react'
-import React from 'react'
-import {
-  TextBoxWithVariableButton,
-  TextBoxWithVariableButtonProps,
-} from './TextboxWithVariableButton'
-
-export const TextareaWithVariableButton = (
-  props: Omit<TextBoxWithVariableButtonProps, 'TextBox'>
-) => <TextBoxWithVariableButton TextBox={Textarea} {...props} />
diff --git a/apps/builder/components/shared/TextboxWithVariableButton/index.tsx b/apps/builder/components/shared/TextboxWithVariableButton/index.tsx
deleted file mode 100644
index db443c541..000000000
--- a/apps/builder/components/shared/TextboxWithVariableButton/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { InputWithVariableButton } from './InputWithVariableButton'
-export { TextareaWithVariableButton } from './TextareaWithVariableButton'
diff --git a/apps/builder/services/utils/index.ts b/apps/builder/services/utils/index.ts
index ee0777f38..68167416c 100644
--- a/apps/builder/services/utils/index.ts
+++ b/apps/builder/services/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './utils'
 export * from './useUndo'
+export * from './useRefState'
diff --git a/apps/builder/services/utils/useRefState.ts b/apps/builder/services/utils/useRefState.ts
new file mode 100644
index 000000000..975b66dcd
--- /dev/null
+++ b/apps/builder/services/utils/useRefState.ts
@@ -0,0 +1,10 @@
+import { useEffect, useRef, useState } from 'react'
+
+export const useRefState = (initialValue: string) => {
+  const [state, setState] = useState(initialValue)
+  const stateRef = useRef<string>(state)
+  useEffect(() => {
+    stateRef.current = state
+  }, [state])
+  return [stateRef, setState]
+}