diff --git a/src/components/drawers/GameChooserDrawer.js b/src/components/drawers/GameChooserDrawer.js index aca22ce15..756f4157a 100644 --- a/src/components/drawers/GameChooserDrawer.js +++ b/src/components/drawers/GameChooserDrawer.js @@ -285,9 +285,11 @@ class GameChooserDrawer extends Component { return animation !== this.state.animation || show || show !== this.props.show } - componentDidUpdate(prevProps, prevState) { - if (this.state.scrollTop !== prevState.scrollTop - && this.state.scrollTop !== this.gamesListElement.scrollTop) { + async componentDidUpdate(prevProps, prevState) { + if ( + this.state.scrollTop !== prevState.scrollTop + && this.state.scrollTop !== this.gamesListElement.scrollTop + ) { // Update scroll top this.gamesListElement.scrollTop = this.state.scrollTop @@ -304,6 +306,8 @@ class GameChooserDrawer extends Component { if (!prevProps.show && this.props.show) { // Scroll current list element into view + await this.resize() + let index = this.shownGameTrees.findIndex(([, i]) => i === this.props.gameIndex) let scrollTop = 0 if (index >= 0) scrollTop = this.getRowFromIndex(index) * itemHeight @@ -339,12 +343,14 @@ class GameChooserDrawer extends Component { } } - resize() { + async resize() { let innerWidth = this.gamesListElement.offsetWidth - 28 let height = this.gamesListElement.offsetHeight let rowCount = Math.floor(innerWidth / itemMinWidth) - this.setState({innerWidth, height, rowCount}) + return new Promise(resolve => { + this.setState({innerWidth, height, rowCount}, resolve) + }) } getRowFromIndex(i) { diff --git a/style/index.css b/style/index.css index 234a44088..26232f3fd 100644 --- a/style/index.css +++ b/style/index.css @@ -748,7 +748,7 @@ header, #bar .bar { z-index: 15; } .drawer.hidecontent > * { - visibility: hidden; + display: none; } .drawer.show { transform: translateY(-285px);