HAI-1248 Fix document scroll position in forms

src/common/components/app/App.tsx

@@ -10,13 +10,15 @@ import theme from './theme';
 import { GlobalNotificationProvider } from '../globalNotification/GlobalNotificationContext';
 import GlobalNotification from '../globalNotification/GlobalNotification';
 import { FeatureFlagsProvider } from '../featureFlags/FeatureFlagsContext';
+import ScrollToTop from '../scrollToTop/ScrollToTop';
 import './app.scss';
 import '../../../assets/styles/reset.css';
 
 const queryClient = new QueryClient();
 
 const App: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Router>
+    <ScrollToTop />
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>

src/common/components/scrollToTop/ScrollToTop.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Scroll to top of document when URL pathname changes
+ */
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}

src/domain/forms/MultipageForm.tsx

@@ -87,6 +87,7 @@ const MultipageForm: React.FC<Props> = ({
 
   function handleStepChange(value: Action) {
     function changeStep() {
+      window.scrollTo(0, 0);
       dispatch(value);
       if (onStepChange) {
         onStepChange();

src/testUtils/render.tsx

@@ -44,6 +44,7 @@ const AllTheProviders = ({ children }: Props) => {
 
 const customRender = (ui: React.ReactElement, options: RenderOptions = {}, route = '/') => {
   window.history.pushState({}, 'Test page', route);
+  window.scrollTo = function () {};
   return {
     user: userEvent.setup(),
     ...render(ui, {