Merge pull request #16211 from Bouncey/fix/scroll-position

fix(Instructions): Scroll to top on update

common/app/routes/Challenges/Side-Panel.jsx

@@ -78,6 +78,22 @@ const propTypes = {
 };
 
 export class SidePanel extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.bindTopDiv = this.bindTopDiv.bind(this);
+  }
+
+  componentWillUpdate(nextProps) {
+    const { title } = this.props;
+    if (title !== nextProps.title) {
+      const node = ReactDom.findDOMNode(this.descriptionTop);
+      setTimeout(() => { node.scrollIntoView({ behavior: 'smooth'}); }, 0);
+    }
+  }
+
+  bindTopDiv(node) {
+    this.descriptionTop = node;
+  }
 
   renderDescription(description = [ 'Happy Coding!' ]) {
     return description.map((line, index) => {
@@ -99,12 +115,6 @@ export class SidePanel extends PureComponent {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.title !== nextProps.title) {
-      ReactDom.findDOMNode(this).scrollTop = 0;
-    }
-  }
-
   render() {
     const {
       title,
@@ -126,6 +136,7 @@ export class SidePanel extends PureComponent {
         ref='panel'
         role='complementary'
         >
+        <div ref={ this.bindTopDiv } />
         <div>
           <ChallengeTitle>
             { title }