From 1a2e793e9bb47922ad0c688c445a54d5ff2677db Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kyle@solidstategroup.com>
Date: Tue, 14 May 2024 14:14:21 +0100
Subject: [PATCH] fix: Scroll to top on path change (#3926)

---
 frontend/web/components/App.js          |  2 ++
 frontend/web/components/ScrollToTop.tsx | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 frontend/web/components/ScrollToTop.tsx

diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
index 27c9c3287998..33c9940e52f1 100644
--- a/frontend/web/components/App.js
+++ b/frontend/web/components/App.js
@@ -35,6 +35,7 @@ import SegmentsIcon from './svg/SegmentsIcon'
 import AuditLogIcon from './svg/AuditLogIcon'
 import Permission from 'common/providers/Permission'
 import HomeAside from './pages/HomeAside'
+import ScrollToTop from './ScrollToTop';
 
 const App = class extends Component {
   static propTypes = {
@@ -710,6 +711,7 @@ const App = class extends Component {
             )
           }}
         </AccountProvider>
+        <ScrollToTop/>
       </Provider>
     )
   }
diff --git a/frontend/web/components/ScrollToTop.tsx b/frontend/web/components/ScrollToTop.tsx
new file mode 100644
index 000000000000..ee8eb410cd2e
--- /dev/null
+++ b/frontend/web/components/ScrollToTop.tsx
@@ -0,0 +1,16 @@
+import { FC, useEffect } from 'react'
+import { withRouter } from 'react-router-dom'
+import { RouteComponentProps } from 'react-router'
+
+type ScrollToTopType = RouteComponentProps & {}
+
+const ScrollToTop: FC<ScrollToTopType> = (props) => {
+  const pathname = props.location.pathname
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}
+
+export default withRouter(ScrollToTop)