From 98426a3ce43554345063b4a415ecff72cd2e5823 Mon Sep 17 00:00:00 2001
From: jadmsaadaot <91914654+jadmsaadaot@users.noreply.github.com>
Date: Thu, 28 Sep 2023 14:57:22 -0700
Subject: [PATCH] Scroll up when changing pages (#2288)

* Scroll up when changing pages

* use null safe operator
---
 met-web/src/components/Form/MultiPageForm.tsx | 29 +++++++++++++------
 .../src/components/survey/submit/Stepper.tsx  |  6 ++--
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/met-web/src/components/Form/MultiPageForm.tsx b/met-web/src/components/Form/MultiPageForm.tsx
index f0b251ea4..29ca09db6 100644
--- a/met-web/src/components/Form/MultiPageForm.tsx
+++ b/met-web/src/components/Form/MultiPageForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Form } from '@formio/react';
 import { FormSubmissionData, FormSubmitterProps } from './types';
 import FormStepper from 'components/survey/submit/Stepper';
@@ -9,22 +9,33 @@ interface PageData {
 
 const MultiPageForm = ({ handleFormChange, savedForm, handleFormSubmit }: FormSubmitterProps) => {
     const [currentPage, setCurrentPage] = useState(0);
-    const totalComponents = savedForm?.components?.length;
+
+    const stepperRef = useRef<HTMLDivElement>(null);
+
+    const handleScrollUp = () => {
+        if (stepperRef.current) {
+            stepperRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end',
+            });
+        }
+    };
+
     return (
-        <div className="formio">
-            <FormStepper
-                currentPage={currentPage}
-                totalPages={totalComponents ? totalComponents - 1 : 0}
-                pages={savedForm?.components || []}
-            />
+        <div className="formio" ref={stepperRef}>
+            <FormStepper currentPage={currentPage} pages={savedForm?.components ?? []} />
             <Form
                 form={savedForm || { display: 'wizard' }}
                 options={{ noAlerts: true }}
                 onChange={(form: unknown) => handleFormChange(form as FormSubmissionData)}
                 onNextPage={(pageData: PageData) => {
                     setCurrentPage(pageData.page);
+                    handleScrollUp();
+                }}
+                onPrevPage={(pageData: PageData) => {
+                    setCurrentPage(pageData.page);
+                    handleScrollUp();
                 }}
-                onPrevPage={(pageData: PageData) => setCurrentPage(pageData.page)}
                 onSubmit={(form: unknown) => {
                     const formSubmissionData = form as FormSubmissionData;
                     handleFormSubmit(formSubmissionData.data);
diff --git a/met-web/src/components/survey/submit/Stepper.tsx b/met-web/src/components/survey/submit/Stepper.tsx
index 0720d518f..43aeb4c23 100644
--- a/met-web/src/components/survey/submit/Stepper.tsx
+++ b/met-web/src/components/survey/submit/Stepper.tsx
@@ -6,17 +6,17 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 
 export interface ProgressBarProps {
     currentPage: number;
-    totalPages: number;
     pages: Array<FormInfo>;
+    [prop: string]: unknown;
 }
 
-function FormStepper({ currentPage, totalPages, pages }: ProgressBarProps) {
+function FormStepper({ currentPage, pages, ...rest }: ProgressBarProps) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
     return (
         <Box sx={{ pb: 2 }}>
-            <Stepper activeStep={currentPage} alternativeLabel>
+            <Stepper activeStep={currentPage} alternativeLabel {...rest}>
                 {pages.map((page: FormInfo, index: number) => (
                     <Step key={index}>
                         <StepLabel> {(!isMobile || index === currentPage) && page.title}</StepLabel>