Fix scrolling (microsoft#5747)

rchiodo · web-flow · commit 286ef4fef4a0 · 2019-05-24T08:19:03.000-07:00
diff --git a/news/2 Fixes/5560.md b/news/2 Fixes/5560.md
@@ -0,0 +1 @@
+Change scrolling to not animate to workaround async updates breaking the animation.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/datascience-ui/history-react/contentPanel.tsx b/src/datascience-ui/history-react/contentPanel.tsx
@@ -30,7 +30,7 @@ export interface IContentPanelProps {
 }
 
 export class ContentPanel extends React.Component<IContentPanelProps> {
-    private bottom: HTMLDivElement | undefined;
+    private bottomRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
     constructor(prop: IContentPanelProps) {
         super(prop);
     }
@@ -51,7 +51,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
                         {this.renderCells()}
                     </div>
                 </div>
-                <div ref={this.updateBottom}/>
+                <div ref={this.bottomRef}/>
             </div>
         );
     }
@@ -88,20 +88,10 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     }
 
     private scrollToBottom = () => {
-        if (this.bottom && this.bottom.scrollIntoView && !this.props.skipNextScroll && !this.props.testMode) {
-            // Delay this until we are about to render. React hasn't setup the size of the bottom element
-            // yet so we need to delay. 10ms looks good from a user point of view
-            setTimeout(() => {
-                if (this.bottom) {
-                    this.bottom.scrollIntoView({behavior: 'smooth', block : 'end', inline: 'end'});
-                }
-            }, 100);
-        }
-    }
-
-    private updateBottom = (newBottom: HTMLDivElement) => {
-        if (newBottom !== this.bottom) {
-            this.bottom = newBottom;
+        if (this.bottomRef.current && !this.props.skipNextScroll && !this.props.testMode) {
+            // Force auto here as smooth scrolling can be canceled by updates to the window
+            // from elsewhere (and keeping track of these would make this hard to maintain)
+            this.bottomRef.current.scrollIntoView({behavior: 'auto', block: 'start', inline: 'nearest'});
         }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Change scrolling to not animate to workaround async updates breaking the animation.`