Skip to content

Commit

Permalink
fix: scroll to top when switching dashboard (#1040)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
jenniferarnesen authored Sep 8, 2020
1 parent fde9ef1 commit b7e6fab
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 6 deletions.
6 changes: 0 additions & 6 deletions src/components/Dashboard/Dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,6 @@ export class Dashboard extends Component {
this.props.selectDashboard(id)

this.setHeaderbarVisibility()

this.scrollToTop()
}
}

Expand All @@ -62,10 +60,6 @@ export class Dashboard extends Component {
}
}

scrollToTop = () => {
window.scrollTo(0, 0)
}

componentDidMount() {
this.setDashboard()
}
Expand Down
7 changes: 7 additions & 0 deletions src/components/Dashboard/ViewDashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 -
Expand All @@ -50,13 +55,15 @@ ViewDashboard.propTypes = {
controlBarRows: PropTypes.number,
dashboardIsEditing: PropTypes.bool,
dashboardIsPrinting: PropTypes.bool,
selectedId: PropTypes.string,
}

const mapStateToProps = state => {
return {
dashboardIsEditing: sGetIsEditing(state),
dashboardIsPrinting: sGetIsPrinting(state),
controlBarRows: sGetControlBarUserRows(state),
selectedId: sGetSelectedId(state),
}
}

Expand Down

0 comments on commit b7e6fab

Please sign in to comment.