Make CustomScrollbars rerender when content change

1 files changed, 23 insertions, 1 deletions

diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx
index 08e996c250..bc56ffcf3c 100644
--- a/gui/src/renderer/components/CustomScrollbars.tsx
+++ b/gui/src/renderer/components/CustomScrollbars.tsx
@@ -1,6 +1,14 @@
 import * as React from 'react';
+import styled from 'styled-components';
 import { Scheduler } from '../../shared/scheduler';
 
+const ScrollableContent = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100%',
+  height: 'max-content',
+});
+
 const AUTOHIDE_TIMEOUT = 1000;
 
 interface IProps {
@@ -54,10 +62,16 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
   };
 
   private scrollableRef = React.createRef<HTMLDivElement>();
+  private scrollableContentRef = React.createRef<HTMLDivElement>();
   private trackRef = React.createRef<HTMLDivElement>();
   private thumbRef = React.createRef<HTMLDivElement>();
   private autoHideScheduler = new Scheduler();
 
+  // Update scrollbar when content grows/shrinks.
+  private contentResizeObserver = new ResizeObserver(() => {
+    this.updateScrollbarsHelper({ size: true });
+  });
+
   public scrollToTop() {
     const scrollable = this.scrollableRef.current;
     if (scrollable) {
@@ -134,6 +148,10 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
     if (this.props.autoHide) {
       this.startAutoHide();
     }
+
+    if (this.scrollableContentRef.current) {
+      this.contentResizeObserver.observe(this.scrollableContentRef.current);
+    }
   }
 
   public shouldComponentUpdate(nextProps: IProps, nextState: IState) {
@@ -160,6 +178,10 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
     document.removeEventListener('mousemove', this.handleMouseMove);
     document.removeEventListener('mouseup', this.handleMouseUp);
     document.removeEventListener('mousedown', this.handleMouseDown);
+
+    if (this.scrollableContentRef.current) {
+      this.contentResizeObserver.unobserve(this.scrollableContentRef.current);
+    }
   }
 
   public componentDidUpdate() {
@@ -201,7 +223,7 @@ export default class CustomScrollbars extends React.Component<IProps, IState> {
           style={{ overflow: 'auto', flex: fillContainer ? '1' : undefined }}
           onScroll={this.onScroll}
           ref={this.scrollableRef}>
-          {children}
+          <ScrollableContent ref={this.scrollableContentRef}>{children}</ScrollableContent>
         </div>
       </div>
     );