Scroll up when changing pages (#2288)

* Scroll up when changing pages * use null safe operator
bcgov · Sep 28, 2023 · a330664 · a330664
1 parent 294b007
commit a330664
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git 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
@@ -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>