Merge pull request #974 from oneblink/AP-5821

AP-5821 # added scrollToTopOfPage to OneBlinkFormBaseProps

Author: mymattcarroll

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- added `scrollToTopOfPage` to `OneBlinkFormBaseProps`
+
 ## [8.12.2] - 2025-10-28
 
 ### Fixed

src/OneBlinkFormBase.tsx

@@ -190,6 +190,12 @@ export type OneBlinkFormBaseProps = OneBlinkReadOnlyFormProps & {
      */
     scrollableContainerId?: string
   }
+  /**
+   * Whether to scroll to the top of the page when the user navigates to a new
+   * page. If false the window will scroll to the top of the page stepper.
+   * Defaults to false.
+   */
+  scrollToTopOfPage?: boolean
 }
 
 export type OneBlinkFormUncontrolledProps = {
@@ -244,6 +250,7 @@ function OneBlinkFormBase({
   navigableValidationErrorsNotificationSettings,
   replaceInjectablesOverrides,
   sectionState,
+  scrollToTopOfPage,
 }: Props) {
   const isOffline = useIsOffline()
   const { isUsingFormsKey } = useAuth()
@@ -526,6 +533,7 @@ function OneBlinkFormBase({
     pages,
     formElementsValidation,
     formElementsConditionallyShown,
+    scrollToTopOfPage,
   })
 
   // #endregion

src/hooks/usePages.ts

@@ -15,11 +15,13 @@ export default function usePages({
   formElementsValidation,
   formElementsConditionallyShown,
   hasAttemptedSubmit,
+  scrollToTopOfPage,
 }: {
   pages: FormTypes.PageElement[]
   formElementsValidation: FormElementsValidation | undefined
   formElementsConditionallyShown: FormElementsConditionallyShown
   hasAttemptedSubmit: boolean
+  scrollToTopOfPage?: boolean
 }) {
   const scrollToTopOfPageHTMLElementRef = React.useRef<HTMLDivElement>(null)
   const [visitedPageIds, setVisitedPageIds] = React.useState<string[]>([])
@@ -80,31 +82,41 @@ export default function usePages({
       const scrollToTopOfPageHTMLElement =
         scrollToTopOfPageHTMLElementRef.current
       if (isShowingMultiplePages && scrollToTopOfPageHTMLElement) {
-        if (scrollToTopOfPageHTMLElement) {
+        if (scrollToTopOfPage) {
           window.requestAnimationFrame(() => {
-            scrollToTopOfPageHTMLElement.scrollIntoView({
-              block: 'start',
-              behavior: 'smooth',
-            })
+            window.scrollTo({ top: 0, behavior: 'smooth' })
           })
-        }
-        const stepItemHTMLElement = document.getElementById(
-          `steps-navigation-step-${pageId}`,
-        )
-        if (stepItemHTMLElement) {
+        } else if (scrollToTopOfPageHTMLElement) {
           window.requestAnimationFrame(() => {
-            stepItemHTMLElement.scrollIntoView({
+            scrollToTopOfPageHTMLElement.scrollIntoView({
               block: 'start',
               behavior: 'smooth',
             })
           })
+          const stepItemHTMLElement = document.getElementById(
+            `steps-navigation-step-${pageId}`,
+          )
+          if (stepItemHTMLElement) {
+            window.requestAnimationFrame(() => {
+              stepItemHTMLElement.scrollIntoView({
+                block: 'start',
+                behavior: 'smooth',
+              })
+            })
+          }
         }
+
         //blur prev/next buttons after they've been clicked
         const activeElement = document?.activeElement as HTMLElement
         activeElement.blur()
       }
     },
-    [closeStepsNavigation, currentPageId, isShowingMultiplePages],
+    [
+      closeStepsNavigation,
+      currentPageId,
+      isShowingMultiplePages,
+      scrollToTopOfPage,
+    ],
   )
 
   const goToNextPage = React.useCallback(() => {