From 92d88271d7339e005e206b8809301e93da07957a Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Wed, 13 Mar 2024 14:41:40 +0530
Subject: [PATCH] fix: scroll to bottom when other option is selected (#2204)

---
 .../questions/MultipleChoiceMultiQuestion.tsx   | 11 ++++++++---
 .../questions/MultipleChoiceSingleQuestion.tsx  | 17 ++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx b/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
index c91850b6a3..6b62b30bb6 100644
--- a/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
+++ b/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
@@ -77,10 +77,13 @@ export default function MultipleChoiceMultiQuestion({
   );
 
   const otherSpecify = useRef<HTMLInputElement | null>(null);
+  const choicesContainerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (otherSelected) {
-      otherSpecify.current?.focus();
+    // Scroll to the bottom of choices container and focus on 'otherSpecify' input when 'otherSelected' is true
+    if (otherSelected && choicesContainerRef.current && otherSpecify.current) {
+      choicesContainerRef.current.scrollTop = choicesContainerRef.current.scrollHeight;
+      otherSpecify.current.focus();
     }
   }, [otherSelected]);
 
@@ -126,7 +129,9 @@ export default function MultipleChoiceMultiQuestion({
       <div className="mt-4">
         <fieldset>
           <legend className="sr-only">Options</legend>
-          <div className="bg-survey-bg relative max-h-[33vh] space-y-2 overflow-y-auto rounded-md py-0.5 pr-2">
+          <div
+            className="bg-survey-bg relative max-h-[33vh] space-y-2 overflow-y-auto rounded-md py-0.5 pr-2"
+            ref={choicesContainerRef}>
             {questionChoices.map((choice, idx) => (
               <label
                 key={choice.id}
diff --git a/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx b/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
index 128d8087fb..d393a06387 100644
--- a/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
+++ b/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
@@ -34,11 +34,12 @@ export default function MultipleChoiceSingleQuestion({
   setTtc,
 }: MultipleChoiceSingleProps) {
   const [startTime, setStartTime] = useState(performance.now());
+  const [otherSelected, setOtherSelected] = useState(false);
+  const otherSpecify = useRef<HTMLInputElement | null>(null);
+  const choicesContainerRef = useRef<HTMLDivElement | null>(null);
 
   useTtc(question.id, ttc, setTtc, startTime, setStartTime);
 
-  const [otherSelected, setOtherSelected] = useState(false);
-
   const questionChoices = useMemo(() => {
     if (!question.choices) {
       return [];
@@ -60,13 +61,14 @@ export default function MultipleChoiceSingleQuestion({
     setOtherSelected(isOtherSelected);
   }, [question.id, question.choices, value]);
 
-  const otherSpecify = useRef<HTMLInputElement | null>(null);
-
   useEffect(() => {
-    if (otherSelected) {
-      otherSpecify.current?.focus();
+    // Scroll to the bottom of choices container and focus on 'otherSpecify' input when 'otherSelected' is true
+    if (otherSelected && choicesContainerRef.current && otherSpecify.current) {
+      choicesContainerRef.current.scrollTop = choicesContainerRef.current.scrollHeight;
+      otherSpecify.current.focus();
     }
   }, [otherSelected]);
+
   return (
     <form
       key={question.id}
@@ -86,7 +88,8 @@ export default function MultipleChoiceSingleQuestion({
 
           <div
             className="bg-survey-bg relative max-h-[33vh] space-y-2 overflow-y-auto rounded-md py-0.5 pr-2"
-            role="radiogroup">
+            role="radiogroup"
+            ref={choicesContainerRef}>
             {questionChoices.map((choice, idx) => (
               <label
                 key={choice.id}