From 38a73fa4ab712cefda2c8a561fe56200b951b081 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Mon, 2 Oct 2023 15:08:37 +0100
Subject: [PATCH] fix: stop propagation in the toolbar (#17716)

* fix: stop propagation in the toolbar edit action form when typing

* and step fields
---
 .../src/lib/lemon-ui/LemonInput/LemonInput.tsx    | 15 +++++++++++++++
 .../lib/lemon-ui/LemonTextArea/LemonTextArea.tsx  | 14 ++++++++++++--
 frontend/src/toolbar/actions/EditAction.tsx       |  6 +++++-
 frontend/src/toolbar/actions/StepField.tsx        |  2 ++
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
index d34ec50ed3a9e..650d621528ea2 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
@@ -44,6 +44,8 @@ interface LemonInputPropsBase
     onPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void
     'data-attr'?: string
     'aria-label'?: string
+    /** Whether to stop propagation of events from the input */
+    stopPropagation?: boolean
 }
 
 export interface LemonInputPropsText extends LemonInputPropsBase {
@@ -80,6 +82,7 @@ export const LemonInput = React.forwardRef<HTMLInputElement, LemonInputProps>(fu
         value,
         transparentBackground = false,
         size = 'medium',
+        stopPropagation = false,
         ...textProps
     },
     ref
@@ -160,6 +163,9 @@ export const LemonInput = React.forwardRef<HTMLInputElement, LemonInputProps>(fu
                 type={(type === 'password' && passwordVisible ? 'text' : type) || 'text'}
                 value={value}
                 onChange={(event) => {
+                    if (stopPropagation) {
+                        event.stopPropagation()
+                    }
                     if (type === 'number') {
                         onChange?.(
                             !isNaN(event.currentTarget.valueAsNumber) ? event.currentTarget.valueAsNumber : undefined
@@ -169,14 +175,23 @@ export const LemonInput = React.forwardRef<HTMLInputElement, LemonInputProps>(fu
                     }
                 }}
                 onFocus={(event) => {
+                    if (stopPropagation) {
+                        event.stopPropagation()
+                    }
                     setFocused(true)
                     onFocus?.(event)
                 }}
                 onBlur={(event) => {
+                    if (stopPropagation) {
+                        event.stopPropagation()
+                    }
                     setFocused(false)
                     onBlur?.(event)
                 }}
                 onKeyDown={(event) => {
+                    if (stopPropagation) {
+                        event.stopPropagation()
+                    }
                     if (onPressEnter && event.key === 'Enter') {
                         onPressEnter(event)
                     }
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
index 80544bf071426..77c94c64aad0f 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
@@ -34,11 +34,13 @@ export interface LemonTextAreaProps
     minRows?: number
     maxRows?: number
     rows?: number
+    /** Whether to stop propagation of events from the input */
+    stopPropagation?: boolean
 }
 
 /** A `textarea` component for multi-line text. */
 export const LemonTextArea = React.forwardRef<HTMLTextAreaElement, LemonTextAreaProps>(function _LemonTextArea(
-    { className, onChange, onPressCmdEnter: onPressEnter, minRows = 3, onKeyDown, ...textProps },
+    { className, onChange, onPressCmdEnter: onPressEnter, minRows = 3, onKeyDown, stopPropagation, ...textProps },
     ref
 ): JSX.Element {
     const _ref = useRef<HTMLTextAreaElement | null>(null)
@@ -50,13 +52,21 @@ export const LemonTextArea = React.forwardRef<HTMLTextAreaElement, LemonTextArea
             ref={textRef}
             className={clsx('LemonTextArea', className)}
             onKeyDown={(e) => {
+                if (stopPropagation) {
+                    e.stopPropagation()
+                }
                 if (onPressEnter && e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
                     onPressEnter(textProps.value?.toString() ?? '')
                 }
 
                 onKeyDown?.(e)
             }}
-            onChange={(event) => onChange?.(event.currentTarget.value ?? '')}
+            onChange={(event) => {
+                if (stopPropagation) {
+                    event.stopPropagation()
+                }
+                return onChange?.(event.currentTarget.value ?? '')
+            }}
             {...textProps}
         />
     )
diff --git a/frontend/src/toolbar/actions/EditAction.tsx b/frontend/src/toolbar/actions/EditAction.tsx
index 6898002fc6349..409f439565704 100644
--- a/frontend/src/toolbar/actions/EditAction.tsx
+++ b/frontend/src/toolbar/actions/EditAction.tsx
@@ -64,7 +64,11 @@ export function EditAction(): JSX.Element {
                 <div className="mb-4">
                     <p>What did your user do?</p>
                     <Field name="name">
-                        <LemonInput placeholder="E.g: Clicked Sign Up" className="action-title-field" />
+                        <LemonInput
+                            placeholder="E.g: Clicked Sign Up"
+                            className="action-title-field"
+                            stopPropagation={true}
+                        />
                     </Field>
                 </div>
 
diff --git a/frontend/src/toolbar/actions/StepField.tsx b/frontend/src/toolbar/actions/StepField.tsx
index 5bb2d5802900c..b066bae78d239 100644
--- a/frontend/src/toolbar/actions/StepField.tsx
+++ b/frontend/src/toolbar/actions/StepField.tsx
@@ -63,12 +63,14 @@ export function StepField({ step, item, label, caption }: StepFieldProps): JSX.E
                                 className={clsx(!selected && 'opacity-50')}
                                 onChange={onChange}
                                 value={value ?? ''}
+                                stopPropagation={true}
                             />
                         ) : (
                             <LemonInput
                                 className={clsx(!selected && 'opacity-50')}
                                 onChange={onChange}
                                 value={value ?? ''}
+                                stopPropagation={true}
                             />
                         )
                     }}