Save the scroll position when switching between tabs

2 files changed, 48 insertions, 2 deletions

diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx
index 8928e9891b..fc91d7d239 100644
--- a/gui/src/renderer/components/CustomScrollbars.tsx
+++ b/gui/src/renderer/components/CustomScrollbars.tsx
@@ -86,6 +86,15 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
     }
   }
 
+  public getScrollPosition(): [number, number] {
+    const scroll = this.scrollableRef.current;
+    if (scroll) {
+      return [scroll.scrollLeft, scroll.scrollTop];
+    } else {
+      return [0, 0];
+    }
+  }
+
   public componentDidMount() {
     this.updateScrollbarsHelper({
       position: true,
diff --git a/gui/src/renderer/components/SelectLocation.tsx b/gui/src/renderer/components/SelectLocation.tsx
index fe0e66b237..3753e3312a 100644
--- a/gui/src/renderer/components/SelectLocation.tsx
+++ b/gui/src/renderer/components/SelectLocation.tsx
@@ -43,13 +43,29 @@ export default class SelectLocation extends Component<IProps> {
   private exitLocationList = React.createRef<LocationList>();
   private bridgeLocationList = React.createRef<LocationList>();
 
+  private scrollPositionByScope: { [index: number]: [number, number] } = {};
+
   public componentDidMount() {
     this.scrollToSelectedCell();
   }
 
-  public componentDidUpdate(prevProps: IProps) {
+  public componentDidUpdate(prevProps: IProps, _prevState: {}, snapshot?: [number, number]) {
     if (this.props.locationScope !== prevProps.locationScope) {
-      this.scrollToSelectedCell();
+      this.restoreScrollPosition(this.props.locationScope);
+
+      if (snapshot) {
+        this.saveScrollPosition(prevProps.locationScope, snapshot);
+      }
+    }
+  }
+
+  public getSnapshotBeforeUpdate(_prevProps: IProps) {
+    const scrollView = this.scrollView.current;
+
+    if (scrollView) {
+      return scrollView.getScrollPosition();
+    } else {
+      return undefined;
     }
   }
 
@@ -143,6 +159,27 @@ export default class SelectLocation extends Component<IProps> {
     );
   }
 
+  public saveScrollPosition(scope: LocationScope, position: [number, number]) {
+    this.scrollPositionByScope[scope] = position;
+  }
+
+  public restoreScrollPosition(scope: LocationScope) {
+    const prevScrollPos = this.scrollPositionByScope[scope];
+
+    if (prevScrollPos) {
+      this.scrollToPosition(...prevScrollPos);
+    } else {
+      this.scrollToSelectedCell();
+    }
+  }
+
+  private scrollToPosition(x: number, y: number) {
+    const scrollView = this.scrollView.current;
+    if (scrollView) {
+      scrollView.scrollTo(x, y);
+    }
+  }
+
   private scrollToSelectedCell() {
     const ref =
       this.props.locationScope === LocationScope.relay