Fix scrolling in the history window

news/2 Fixes/5131.md

@@ -0,0 +1 @@
+Fix scrolling in the interactive window.

src/datascience-ui/history-react/MainPanel.tsx

@@ -31,7 +31,6 @@ class HistoryPostOffice extends PostOffice<IHistoryMapping> {}
 
 export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState> implements IMessageHandler {
     private stackLimit = 10;
-    private bottom: HTMLDivElement | undefined;
     private updateCount = 0;
     private renderCount = 0;
     private sentStartup = false;
@@ -61,13 +60,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         this.variableExplorerRef = React.createRef<VariableExplorer>();
     }
 
-    public componentDidMount() {
-        this.scrollToBottom();
-    }
-
     public componentDidUpdate(_prevProps: Readonly<IMainPanelProps>, _prevState: Readonly<IMainPanelState>, _snapshot?: {}) {
-        this.scrollToBottom();
-
         // If in test mode, update our outputs
         if (this.props.testMode) {
             this.updateCount = this.updateCount + 1;
@@ -91,7 +84,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
                 <HistoryPostOffice messageHandlers={[this]} ref={this.updatePostOffice} />
                 <HeaderPanel {...headerProps} />
                 <ContentPanel {...contentProps} />
-                <div ref={this.updateBottom}/>
             </div>
         );
     }
@@ -208,7 +200,8 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
             saveEditCellRef: this.saveEditCellRef,
             gotoCellCode: this.gotoCellCode,
             deleteCell: this.deleteCell,
-            submitInput: this.submitInput
+            submitInput: this.submitInput,
+            skipNextScroll: this.state.skipNextScroll ? true : false
         };
     }
     private getHeaderProps = (baseTheme: string): IHeaderPanelProps => {
@@ -446,24 +439,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         this.sendMessage(HistoryMessages.Export, cellContents);
     }
 
-    private scrollToBottom = () => {
-        if (this.bottom && this.bottom.scrollIntoView && !this.state.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;
-        }
-    }
-
     private updateSelf = (r: HTMLDivElement) => {
         this.mainPanel = r;
     }

src/datascience-ui/history-react/contentPanel.tsx

@@ -18,17 +18,27 @@ export interface IContentPanelProps {
     testMode?: boolean;
     codeTheme: string;
     submittedText: boolean;
+    skipNextScroll: boolean;
     saveEditCellRef(ref: Cell | null): void;
     gotoCellCode(index: number): void;
     deleteCell(index: number): void;
     submitInput(code: string): void;
 }
 
 export class ContentPanel extends React.Component<IContentPanelProps> {
+    private bottom: HTMLDivElement | undefined;
     constructor(prop: IContentPanelProps) {
         super(prop);
     }
 
+    public componentDidMount() {
+        this.scrollToBottom();
+    }
+
+    public componentDidUpdate() {
+        this.scrollToBottom();
+    }
+
     public render() {
         const newContentTop = `${this.props.contentTop.toString()}px solid transparent`;
 
@@ -43,6 +53,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
                         {this.renderCells()}
                     </div>
                 </div>
+                <div ref={this.updateBottom}/>
             </div>
         );
     }
@@ -72,4 +83,23 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
             </ErrorBoundary>
         );
     }
+
+    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;
+        }
+    }
+
 }