fix: dont propagate events in surveys (#1911)

Author: lucasheriques

src/__tests__/extensions/surveys/question-types.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/preact'
-import { MultipleChoiceQuestion } from '../../../extensions/surveys/components/QuestionTypes'
-import { MultipleSurveyQuestion, SurveyQuestionType } from '../../../posthog-surveys-types'
+import { MultipleChoiceQuestion, OpenTextQuestion } from '../../../extensions/surveys/components/QuestionTypes'
+import { BasicSurveyQuestion, MultipleSurveyQuestion, SurveyQuestionType } from '../../../posthog-surveys-types'
 
 describe('MultipleChoiceQuestion', () => {
     const mockAppearance = {
@@ -141,5 +141,73 @@ describe('MultipleChoiceQuestion', () => {
                 expect(document.activeElement).toBe(openInput)
             }, 0)
         })
+
+        it('does not propagate keydown events from open choice input', () => {
+            const parentKeyDownHandler = jest.fn()
+            const { container } = render(
+                <div onKeyDown={parentKeyDownHandler}>
+                    <MultipleChoiceQuestion {...baseProps} question={multipleChoiceQuestion} />
+                </div>
+            )
+
+            // Find the open-ended input using its specific ID
+            const openInput = container.querySelector('#surveyQuestion1Choice3Open') as HTMLInputElement
+            if (!openInput) {
+                throw new Error('Open choice input not found')
+            }
+
+            // Simulate typing 'C' into the open-ended input
+            fireEvent.keyDown(openInput, { key: 'C', code: 'KeyC' })
+
+            // Assert that the parent's keydown handler was NOT called
+            expect(parentKeyDownHandler).not.toHaveBeenCalled()
+        })
     })
 })
+
+describe('OpenTextQuestion', () => {
+    const mockAppearance = {
+        backgroundColor: '#fff',
+        submitButtonText: 'Submit',
+        placeholder: 'Enter your response',
+    }
+
+    const baseProps = {
+        forceDisableHtml: false,
+        appearance: mockAppearance,
+        onSubmit: jest.fn(),
+        onPreviewSubmit: jest.fn(),
+    }
+
+    const openTextQuestion: BasicSurveyQuestion = {
+        type: SurveyQuestionType.Open,
+        question: 'What is your feedback?',
+        description: 'Provide details below',
+        optional: false,
+    }
+
+    it('does not propagate keydown events', () => {
+        const parentKeyDownHandler = jest.fn()
+
+        // Render the component within a div that has a keydown listener
+        const { container } = render(
+            <div onKeyDown={parentKeyDownHandler}>
+                <OpenTextQuestion {...baseProps} question={openTextQuestion} />
+            </div>
+        )
+
+        const textarea = container.querySelector('textarea')
+
+        if (!textarea) {
+            throw new Error('Textarea not found')
+        }
+
+        // Simulate typing 'C' into the textarea
+        fireEvent.keyDown(textarea, { key: 'C', code: 'KeyC' })
+
+        // Assert that the parent's keydown handler was NOT called
+        expect(parentKeyDownHandler).not.toHaveBeenCalled()
+    })
+
+    // Add other tests for OpenTextQuestion if needed...
+})

src/extensions/surveys/components/QuestionTypes.tsx

@@ -49,7 +49,17 @@ export function OpenTextQuestion({
                 backgroundColor={appearance.backgroundColor}
                 forceDisableHtml={forceDisableHtml}
             />
-            <textarea rows={4} placeholder={appearance?.placeholder} onInput={(e) => setText(e.currentTarget.value)} />
+            <textarea
+                rows={4}
+                placeholder={appearance?.placeholder}
+                onInput={(e) => {
+                    setText(e.currentTarget.value)
+                    e.stopPropagation()
+                }}
+                onKeyDown={(e) => {
+                    e.stopPropagation()
+                }}
+            />
             <BottomSection
                 text={question.buttonText || 'Submit'}
                 submitDisabled={!text && !question.optional}
@@ -291,10 +301,11 @@ export function MultipleChoiceQuestion({
         }
     }
 
-    const handleOpenEndedInputChange = (value: string) => {
-        setOpenEndedInput(value)
+    const handleOpenEndedInputChange = (e: React.FormEvent<HTMLInputElement>) => {
+        e.stopPropagation()
+        setOpenEndedInput(e.currentTarget.value)
         if (question.type === SurveyQuestionType.SingleChoice) {
-            setSelectedChoices(value)
+            setSelectedChoices(e.currentTarget.value)
         }
     }
 
@@ -340,7 +351,10 @@ export function MultipleChoiceQuestion({
                                             id={`surveyQuestion${displayQuestionIndex}Choice${idx}Open`}
                                             name={`question${displayQuestionIndex}`}
                                             value={openEndedInput}
-                                            onInput={(e) => handleOpenEndedInputChange(e.currentTarget.value)}
+                                            onKeyDown={(e) => {
+                                                e.stopPropagation()
+                                            }}
+                                            onInput={(e) => handleOpenEndedInputChange(e)}
                                             onClick={(e) => {
                                                 // Ensure the checkbox/radio gets checked when clicking the input
                                                 if (!openChoiceSelected) {