From 5fc18fc44565a797121e725d6afbc740ef33d2d7 Mon Sep 17 00:00:00 2001 From: Shubham Palriwala Date: Wed, 28 Feb 2024 21:45:50 +0530 Subject: [PATCH] fix: increase max height of open text question input to 8 lines (#2153) --- .../src/components/questions/OpenTextQuestion.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/surveys/src/components/questions/OpenTextQuestion.tsx b/packages/surveys/src/components/questions/OpenTextQuestion.tsx index 7cb9fe9dd1..0ac6b95ab9 100644 --- a/packages/surveys/src/components/questions/OpenTextQuestion.tsx +++ b/packages/surveys/src/components/questions/OpenTextQuestion.tsx @@ -45,6 +45,16 @@ export default function OpenTextQuestion({ // setIsValid(isValidInput); onChange({ [question.id]: inputValue }); }; + + const handleInputResize = (event: { target: any }) => { + let maxHeight = 160; // 8 lines + const textarea = event.target; + textarea.style.height = "auto"; + const newHeight = Math.min(textarea.scrollHeight, maxHeight); + textarea.style.height = `${newHeight}px`; + textarea.style.overflow = newHeight >= maxHeight ? "auto" : "hidden"; + }; + const openTextRef = useCallback( (currentElement: HTMLInputElement | HTMLTextAreaElement | null) => { if (question.id && currentElement && autoFocus) { @@ -97,7 +107,10 @@ export default function OpenTextQuestion({ required={question.required} value={value as string} type={question.inputType} - onInput={(e) => handleInputChange(e.currentTarget.value)} + onInput={(e) => { + handleInputChange(e.currentTarget.value); + handleInputResize(e); + }} autoFocus={autoFocus} className="border-border bg-survey-bg text-subheading focus:border-border-highlight block w-full rounded-md border p-2 shadow-sm focus:ring-0 sm:text-sm" pattern={question.inputType === "phone" ? "[+][0-9 ]+" : ".*"}