Fix auto-collapsed toots making the TL jump (fixes #417)

1 files changed, 28 insertions, 1 deletions

diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index eb621d5d7..cf82c9ac6 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -45,10 +45,13 @@ export default class Status extends ImmutablePureComponent {
     withDismiss: PropTypes.bool,
     onMoveUp: PropTypes.func,
     onMoveDown: PropTypes.func,
+    getScrollPosition: PropTypes.func,
+    updateScrollBottom: PropTypes.func,
   };
 
   state = {
     isExpanded: null,
+    autoCollapsed: false,
   }
 
   // Avoid checking props that are functions (and whose equality will always
@@ -134,7 +137,31 @@ export default class Status extends ImmutablePureComponent {
       default:
         return false;
       }
-    }()) this.setExpansion(false);
+    }()) {
+      this.setExpansion(false);
+      // Hack to fix timeline jumps on second rendering when auto-collapsing
+      this.setState({ autoCollapsed: true });
+    }
+  }
+
+  getSnapshotBeforeUpdate (prevProps, prevState) {
+    if (this.props.getScrollPosition) {
+      return this.props.getScrollPosition();
+    } else {
+      return null;
+    }
+  }
+
+  //  Hack to fix timeline jumps on second rendering when auto-collapsing
+  componentDidUpdate (prevProps, prevState, snapshot) {
+    if (this.state.autoCollapsed) {
+      this.setState({ autoCollapsed: false });
+      if (snapshot !== null && this.props.updateScrollBottom) {
+        if (this.node.offsetTop < snapshot.top) {
+          this.props.updateScrollBottom(snapshot.height - snapshot.top);
+        }
+      }
+    }
   }
 
   //  `setExpansion()` sets the value of `isExpanded` in our state. It takes