Fix scrolling in the interactive window (#10319)

rchiodo · web-flow · commit 68e00106502c · 2020-02-25T14:03:24.000-08:00
diff --git a/news/2 Fixes/10137.md b/news/2 Fixes/10137.md
@@ -0,0 +1 @@
+Fix scrolling for output to consistently scroll even during execution.
diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx
@@ -355,11 +355,8 @@ ${buildSettingsCss(this.props.settings)}`}</style>
             this.internalScrollCount += 1;
             // 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)
-            // tslint:disable: no-any
-            if ((div as any).scrollIntoViewIfNeeded) {
-                (div as any).scrollIntoViewIfNeeded(false);
-            } else if (div && div.scrollIntoView) {
-                div.scrollIntoView(false);
+            if (div && div.scrollIntoView) {
+                div.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
             }
         }
     };
diff --git a/src/datascience-ui/history-react/redux/reducers/effects.ts b/src/datascience-ui/history-react/redux/reducers/effects.ts
@@ -113,8 +113,7 @@ export namespace Effects {
             newVMs[index] = { ...newVMs[index], scrollCount: newVMs[index].scrollCount + 1 };
             return {
                 ...arg.prevState,
-                cellVMs: newVMs,
-                isAtBottom: false
+                cellVMs: newVMs
             };
         }
 
diff --git a/src/datascience-ui/interactive-common/contentPanel.tsx b/src/datascience-ui/interactive-common/contentPanel.tsx
@@ -34,12 +34,10 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     constructor(prop: IContentPanelProps) {
         super(prop);
     }
-
     public componentDidMount() {
         this.scrollToBottom();
     }
-
-    public componentDidUpdate() {
+    public componentWillReceiveProps() {
         this.scrollToBottom();
     }
 
@@ -58,7 +56,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
                 <div id="cell-table" role="list">
                     {this.renderCells()}
                 </div>
-                <div ref={this.bottomRef} />
+                <div id="bottomDiv" ref={this.bottomRef} />
             </div>
         );
     }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Fix scrolling for output to consistently scroll even during execution.`
Original file line number	Diff line number	Diff line change
@@ -355,11 +355,8 @@ ${buildSettingsCss(this.props.settings)}`}</style>
`355`	`355`	`this.internalScrollCount += 1;`
`356`	`356`	`// Force auto here as smooth scrolling can be canceled by updates to the window`
`357`	`357`	`// from elsewhere (and keeping track of these would make this hard to maintain)`
`358`		`- // tslint:disable: no-any`
`359`		`- if ((div as any).scrollIntoViewIfNeeded) {`
`360`		`- (div as any).scrollIntoViewIfNeeded(false);`
`361`		`- } else if (div && div.scrollIntoView) {`
`362`		`- div.scrollIntoView(false);`
	`358`	`+ if (div && div.scrollIntoView) {`
	`359`	`+ div.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });`
`363`	`360`	`}`
`364`	`361`	`}`
`365`	`362`	`};`
Original file line number	Diff line number	Diff line change
`@@ -113,8 +113,7 @@ export namespace Effects {`
`113`	`113`	`newVMs[index] = { ...newVMs[index], scrollCount: newVMs[index].scrollCount + 1 };`
`114`	`114`	`return {`
`115`	`115`	`...arg.prevState,`
`116`		`- cellVMs: newVMs,`
`117`		`- isAtBottom: false`
	`116`	`+ cellVMs: newVMs`
`118`	`117`	`};`
`119`	`118`	`}`
`120`	`119`
Original file line number	Diff line number	Diff line change
`@@ -34,12 +34,10 @@ export class ContentPanel extends React.Component<IContentPanelProps> {`
`34`	`34`	`constructor(prop: IContentPanelProps) {`
`35`	`35`	`super(prop);`
`36`	`36`	`}`
`37`		`-`
`38`	`37`	`public componentDidMount() {`
`39`	`38`	`this.scrollToBottom();`
`40`	`39`	`}`
`41`		`-`
`42`		`- public componentDidUpdate() {`
	`40`	`+ public componentWillReceiveProps() {`
`43`	`41`	`this.scrollToBottom();`
`44`	`42`	`}`
`45`	`43`
`@@ -58,7 +56,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {`
`58`	`56`	`<div id="cell-table" role="list">`
`59`	`57`	`{this.renderCells()}`
`60`	`58`	`</div>`
`61`		`- <div ref={this.bottomRef} />`
	`59`	`+ <div id="bottomDiv" ref={this.bottomRef} />`
`62`	`60`	`</div>`
`63`	`61`	`);`
`64`	`62`	`}`