fix(status): Content jump due to height changes (#3734)

1 files changed, 18 insertions, 2 deletions

diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index d22854288..89031b3dc 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -15,6 +15,9 @@ class StatusContent extends React.PureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    expanded: PropTypes.bool,
+    onExpandedToggle: PropTypes.func,
+    onHeightUpdate: PropTypes.func,
     onClick: PropTypes.func,
   };
 
@@ -44,6 +47,12 @@ class StatusContent extends React.PureComponent {
     }
   }
 
+  componentDidUpdate () {
+    if (this.props.onHeightUpdate) {
+      this.props.onHeightUpdate();
+    }
+  }
+
   onMentionClick = (mention, e) => {
     if (e.button === 0) {
       e.preventDefault();
@@ -85,7 +94,13 @@ class StatusContent extends React.PureComponent {
 
   handleSpoilerClick = (e) => {
     e.preventDefault();
-    this.setState({ hidden: !this.state.hidden });
+
+    if (this.props.onExpandedToggle) {
+      // The parent manages the state
+      this.props.onExpandedToggle();
+    } else {
+      this.setState({ hidden: !this.state.hidden });
+    }
   }
 
   setRef = (c) => {
@@ -94,7 +109,8 @@ class StatusContent extends React.PureComponent {
 
   render () {
     const { status } = this.props;
-    const { hidden } = this.state;
+
+    const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
 
     const content = { __html: emojify(status.get('content')) };
     const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };