From 3bbd42587ec7b728693965b8b673577ac3625575 Mon Sep 17 00:00:00 2001
From: HearingSmile <41669762+bigcoder84@users.noreply.github.com>
Date: Sat, 13 Jun 2026 05:28:42 +0800
Subject: [PATCH] fix: stabilize question custom textarea resizing (#1614)

* fix: stabilize question custom textarea resizing

* fix: preserve custom question answer state

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
---
 .../ui/src/components/chat/QuestionCard.tsx   | 119 +++++++++++++-----
 .../__tests__/questionTextareaSizing.test.ts  |  18 +++
 .../components/chat/questionTextareaSizing.ts |  18 +++
 3 files changed, 123 insertions(+), 32 deletions(-)
 create mode 100644 packages/ui/src/components/chat/__tests__/questionTextareaSizing.test.ts
 create mode 100644 packages/ui/src/components/chat/questionTextareaSizing.ts

diff --git a/packages/ui/src/components/chat/QuestionCard.tsx b/packages/ui/src/components/chat/QuestionCard.tsx
index 93b13e77..01d5a5d0 100644
--- a/packages/ui/src/components/chat/QuestionCard.tsx
+++ b/packages/ui/src/components/chat/QuestionCard.tsx
@@ -14,6 +14,7 @@ import { useSessions } from '@/sync/sync-context';
 import * as sessionActions from '@/sync/session-actions';
 import { useI18n } from '@/lib/i18n';
 import { serializeQuestionAsJson, serializeQuestionAsMarkdown } from './questionSerializers';
+import { QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT, getQuestionCustomTextareaHeight } from './questionTextareaSizing';
 
 interface QuestionCardProps {
   question: QuestionRequest;
@@ -22,6 +23,70 @@ interface QuestionCardProps {
 type TabKey = string;
 const SUMMARY_TAB = 'summary';
 
+interface CustomAnswerTextareaProps {
+  value: string;
+  placeholder: string;
+  disabled: boolean;
+  onValueChange: (value: string) => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+
+const CustomAnswerTextarea = React.memo(function CustomAnswerTextarea({
+  value,
+  placeholder,
+  disabled,
+  onValueChange,
+  onKeyDown,
+}: CustomAnswerTextareaProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const [localValue, setLocalValue] = React.useState(value);
+  const [height, setHeight] = React.useState(QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT);
+  const [isScrollable, setIsScrollable] = React.useState(false);
+
+  React.useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  React.useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const nextHeight = getQuestionCustomTextareaHeight({
+      scrollHeight: textarea.scrollHeight,
+      currentHeight: height,
+    });
+    const nextScrollable = textarea.scrollHeight > (nextHeight ?? height);
+    if (isScrollable !== nextScrollable) {
+      setIsScrollable(nextScrollable);
+    }
+    if (nextHeight !== null) {
+      setHeight(nextHeight);
+    }
+  }, [height, isScrollable, localValue]);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={localValue}
+      onChange={(event) => {
+        const nextValue = event.target.value;
+        setLocalValue(nextValue);
+        onValueChange(nextValue);
+      }}
+      placeholder={placeholder}
+      disabled={disabled}
+      rows={2}
+      onKeyDown={onKeyDown}
+      style={{ height }}
+      className={cn(
+        'w-full bg-transparent border border-border/30 focus:border-primary rounded px-2 py-1 outline-none typography-meta text-foreground placeholder:text-muted-foreground/50 transition-colors resize-none',
+        isScrollable ? 'overflow-y-auto' : 'overflow-hidden'
+      )}
+      autoFocus
+    />
+  );
+});
+
 export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
   const { t } = useI18n();
   const respondToQuestion = sessionActions.respondToQuestion;
@@ -40,7 +105,8 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
 
   const [selectedOptions, setSelectedOptions] = React.useState<Record<number, string[]>>({});
   const [customMode, setCustomMode] = React.useState<Record<number, boolean>>({});
-  const [customText, setCustomText] = React.useState<Record<number, string>>({});
+  const customTextRef = React.useRef<Record<number, string>>({});
+  const [customTextFilled, setCustomTextFilled] = React.useState<Record<number, boolean>>({});
 
   const questions = React.useMemo(() => question.questions ?? [], [question.questions]);
   const isSummaryTab = activeTab === SUMMARY_TAB;
@@ -56,7 +122,8 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
     setActiveTab('0');
     setSelectedOptions({});
     setCustomMode({});
-    setCustomText({});
+    customTextRef.current = {};
+    setCustomTextFilled({});
     setHasResponded(false);
   }, [question.id]);
 
@@ -76,12 +143,12 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
   const getAnswerDisplay = React.useCallback((index: number): string => {
     const isCustom = Boolean(customMode[index]);
     if (isCustom) {
-      const value = (customText[index] ?? '').trim();
+      const value = (customTextRef.current[index] ?? '').trim();
       return value || t('chat.questionCard.noAnswer');
     }
     const answers = selectedOptions[index] ?? [];
     return answers.length > 0 ? answers.join(', ') : t('chat.questionCard.noAnswer');
-  }, [customMode, customText, selectedOptions, t]);
+  }, [customMode, selectedOptions, t]);
 
   const isMultiple = Boolean(activeQuestion?.multiple);
   const selectedForActive = selectedOptions[activeIndex] ?? [];
@@ -92,8 +159,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
     for (let index = 0; index < questions.length; index += 1) {
       const isCustom = Boolean(customMode[index]);
       if (isCustom) {
-        const value = (customText[index] ?? '').trim();
-        if (!value) pending.push(index);
+        if (!customTextFilled[index]) pending.push(index);
         continue;
       }
 
@@ -103,7 +169,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
       }
     }
     return pending;
-  }, [customMode, customText, questions.length, selectedOptions]);
+  }, [customMode, customTextFilled, questions.length, selectedOptions]);
 
   const requiredSatisfied = React.useMemo(() => {
     if (questions.length === 0) return false;
@@ -131,7 +197,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
     for (let index = 0; index < questions.length; index += 1) {
       const isCustom = Boolean(customMode[index]);
       if (isCustom) {
-        const value = (customText[index] ?? '').trim();
+        const value = (customTextRef.current[index] ?? '').trim();
         answers.push(value ? [value] : []);
         continue;
       }
@@ -140,13 +206,14 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
     }
 
     return answers;
-  }, [customMode, customText, questions.length, selectedOptions]);
+  }, [customMode, questions.length, selectedOptions]);
 
   const handleToggleOption = React.useCallback(
     (label: string) => {
       if (!activeQuestion) return;
 
       setCustomMode((prev) => ({ ...prev, [activeIndex]: false }));
+      setCustomTextFilled((prev) => (prev[activeIndex] ? { ...prev, [activeIndex]: false } : prev));
 
       setSelectedOptions((prev) => {
         const current = prev[activeIndex] ?? [];
@@ -164,6 +231,14 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
   const handleSelectCustom = React.useCallback(() => {
     setCustomMode((prev) => ({ ...prev, [activeIndex]: true }));
     setSelectedOptions((prev) => ({ ...prev, [activeIndex]: [] }));
+    const hasValue = (customTextRef.current[activeIndex] ?? '').trim().length > 0;
+    setCustomTextFilled((prev) => (prev[activeIndex] === hasValue ? prev : { ...prev, [activeIndex]: hasValue }));
+  }, [activeIndex]);
+
+  const handleCustomValueChange = React.useCallback((value: string) => {
+    customTextRef.current[activeIndex] = value;
+    const hasValue = value.trim().length > 0;
+    setCustomTextFilled((prev) => (prev[activeIndex] === hasValue ? prev : { ...prev, [activeIndex]: hasValue }));
   }, [activeIndex]);
 
   const handleConfirm = React.useCallback(async () => {
@@ -438,32 +513,12 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
 
                   {isCustomActive ? (
                     <div className="pl-6 pr-1 pt-0.5">
-                      <textarea
-                        ref={(el) => {
-                          if (el) {
-                            el.style.height = 'auto';
-                            const lineHeight = 20; // approx typography-meta line height
-                            const minHeight = lineHeight * 2;
-                            const maxHeight = lineHeight * 4;
-                            el.style.height = `${Math.min(Math.max(el.scrollHeight, minHeight), maxHeight)}px`;
-                          }
-                        }}
-                        value={customText[activeIndex] ?? ''}
-                        onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
-                          const el = event.target;
-                          el.style.height = 'auto';
-                          const lineHeight = 20;
-                          const minHeight = lineHeight * 2;
-                          const maxHeight = lineHeight * 4;
-                          el.style.height = `${Math.min(Math.max(el.scrollHeight, minHeight), maxHeight)}px`;
-                          setCustomText((prev) => ({ ...prev, [activeIndex]: el.value }));
-                        }}
+                      <CustomAnswerTextarea
+                        value={customTextRef.current[activeIndex] ?? ''}
+                        onValueChange={handleCustomValueChange}
                         placeholder={t('chat.questionCard.yourAnswer')}
                         disabled={isResponding}
-                        rows={2}
                         onKeyDown={handleKeyDown}
-                        className="w-full bg-transparent border border-border/30 focus:border-primary rounded px-2 py-1 outline-none typography-meta text-foreground placeholder:text-muted-foreground/50 transition-colors resize-none overflow-hidden"
-                        autoFocus
                       />
                     </div>
                   ) : null}
diff --git a/packages/ui/src/components/chat/__tests__/questionTextareaSizing.test.ts b/packages/ui/src/components/chat/__tests__/questionTextareaSizing.test.ts
new file mode 100644
index 00000000..36266df4
--- /dev/null
+++ b/packages/ui/src/components/chat/__tests__/questionTextareaSizing.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'bun:test';
+import { QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT, getQuestionCustomTextareaHeight } from '../questionTextareaSizing';
+
+describe('getQuestionCustomTextareaHeight', () => {
+  test('exports the initial textarea height', () => {
+    expect(QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT).toBe(40);
+  });
+
+  test('returns null when the textarea is already at the target height', () => {
+    expect(getQuestionCustomTextareaHeight({ scrollHeight: 60, currentHeight: 60 })).toBeNull();
+  });
+
+  test('clamps textarea height between two and ten lines', () => {
+    expect(getQuestionCustomTextareaHeight({ scrollHeight: 10, currentHeight: 0 })).toBe(40);
+    expect(getQuestionCustomTextareaHeight({ scrollHeight: 120, currentHeight: 0 })).toBe(120);
+    expect(getQuestionCustomTextareaHeight({ scrollHeight: 260, currentHeight: 0 })).toBe(200);
+  });
+});
diff --git a/packages/ui/src/components/chat/questionTextareaSizing.ts b/packages/ui/src/components/chat/questionTextareaSizing.ts
new file mode 100644
index 00000000..0b58fd07
--- /dev/null
+++ b/packages/ui/src/components/chat/questionTextareaSizing.ts
@@ -0,0 +1,18 @@
+const QUESTION_TEXTAREA_LINE_HEIGHT = 20;
+const QUESTION_TEXTAREA_MIN_LINES = 2;
+const QUESTION_TEXTAREA_MAX_LINES = 10;
+
+export const QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT = QUESTION_TEXTAREA_LINE_HEIGHT * QUESTION_TEXTAREA_MIN_LINES;
+
+export function getQuestionCustomTextareaHeight({
+  scrollHeight,
+  currentHeight,
+}: {
+  scrollHeight: number;
+  currentHeight: number | null | undefined;
+}): number | null {
+  const maxHeight = QUESTION_TEXTAREA_LINE_HEIGHT * QUESTION_TEXTAREA_MAX_LINES;
+  const nextHeight = Math.min(Math.max(scrollHeight, QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT), maxHeight);
+
+  return currentHeight === nextHeight ? null : nextHeight;
+}