mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-23 18:59:14 -06:00
Code Issues Packages Projects Releases 119 Wiki Activity

fix: scroll to bottom when other option is selected (#2204)

Browse Source
This commit is contained in:
Dhruwang Jariwala
2024-03-13 14:41:40 +05:30
committed by GitHub
parent a56c354e84
commit 92d88271d7
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
View File

@@ -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}

17
packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
View File

@@ -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}