diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index d936d840f..a6d3527c7 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -3,6 +3,7 @@ import {connect} from 'react-redux'; import {compose} from 'react-apollo'; import key from 'keymaster'; import isEqual from 'lodash/isEqual'; +import styles from './components/styles.css'; import {modQueueQuery} from '../../graphql/queries'; import {banUser, setCommentStatus} from '../../graphql/mutations'; @@ -90,6 +91,17 @@ class ModerationContainer extends Component { key.unbind('t'); } + componentDidUpdate(_, prevState) { + + // If paging through using keybaord shortcuts, scroll the page to keep the selected + // comment in view. + if (prevState.selectedIndex !== this.state.selectedIndex) { + + // the 'smooth' flag only works in FF as of March 2017 + document.querySelector(`.${styles.selected}`).scrollIntoView({behavior: 'smooth'}); + } + } + componentWillReceiveProps(nextProps) { const {updateAssets} = this.props; if(!isEqual(nextProps.data.assets, this.props.data.assets)) {