From b7e6fabe564b90ad0d1d034f95586c3b95c8d15c Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Tue, 8 Sep 2020 13:56:14 +0200
Subject: [PATCH] fix: scroll to top when switching dashboard (#1040)

After switching the scrollable area from the whole window to just the dashboard area, the scrollToTop stopped working. This fixes it and also improves, as there is no longer a flash of the old dashboard scrollTop before switching to the new dashboard
---
 src/components/Dashboard/Dashboard.js     | 6 ------
 src/components/Dashboard/ViewDashboard.js | 7 +++++++
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js
index fc20fa600..88d155df7 100644
--- a/src/components/Dashboard/Dashboard.js
+++ b/src/components/Dashboard/Dashboard.js
@@ -48,8 +48,6 @@ export class Dashboard extends Component {
             this.props.selectDashboard(id)
 
             this.setHeaderbarVisibility()
-
-            this.scrollToTop()
         }
     }
 
@@ -62,10 +60,6 @@ export class Dashboard extends Component {
         }
     }
 
-    scrollToTop = () => {
-        window.scrollTo(0, 0)
-    }
-
     componentDidMount() {
         this.setDashboard()
     }
diff --git a/src/components/Dashboard/ViewDashboard.js b/src/components/Dashboard/ViewDashboard.js
index fc2e00b00..3b0773f8f 100644
--- a/src/components/Dashboard/ViewDashboard.js
+++ b/src/components/Dashboard/ViewDashboard.js
@@ -9,6 +9,7 @@ import DashboardsBar from '../ControlBar/DashboardsBar'
 import DashboardVerticalOffset from './DashboardVerticalOffset'
 import { sGetIsEditing } from '../../reducers/editDashboard'
 import { sGetIsPrinting } from '../../reducers/printDashboard'
+import { sGetSelectedId } from '../../reducers/selected'
 import { sGetControlBarUserRows } from '../../reducers/controlBar'
 import { acClearEditDashboard } from '../../actions/editDashboard'
 import { acClearPrintDashboard } from '../../actions/printDashboard'
@@ -26,6 +27,10 @@ export const ViewDashboard = props => {
         }
     }, [props.dashboardIsEditing, props.dashboardIsPrinting])
 
+    useEffect(() => {
+        document.querySelector('.dashboard-wrapper')?.scroll(0, 0)
+    }, [props.selectedId])
+
     const height =
         window.innerHeight -
         HEADERBAR_HEIGHT -
@@ -50,6 +55,7 @@ ViewDashboard.propTypes = {
     controlBarRows: PropTypes.number,
     dashboardIsEditing: PropTypes.bool,
     dashboardIsPrinting: PropTypes.bool,
+    selectedId: PropTypes.string,
 }
 
 const mapStateToProps = state => {
@@ -57,6 +63,7 @@ const mapStateToProps = state => {
         dashboardIsEditing: sGetIsEditing(state),
         dashboardIsPrinting: sGetIsPrinting(state),
         controlBarRows: sGetControlBarUserRows(state),
+        selectedId: sGetSelectedId(state),
     }
 }