More scrolling fixes (#6780)

* Added MarkdownImage component

* Fixed unit tests

* More scrolling fixes

2 files changed, 14 insertions, 6 deletions

diff --git a/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx b/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx
index e3ddcc6d5..743d7a22a 100644
--- a/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx
+++ b/webapp/components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx
@@ -4,6 +4,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import {postListScrollChange} from 'actions/global_actions.jsx';
+
 import * as Utils from 'utils/utils.jsx';
 import * as CommonUtils from 'utils/commons.jsx';
 
@@ -82,6 +84,10 @@ export default class PostAttachmentOpenGraph extends React.PureComponent {
         }
     }
 
+    componentDidUpdate() {
+        postListScrollChange();
+    }
+
     fetchData(url) {
         if (!this.props.openGraphData) {
             this.props.actions.getOpenGraphMetadata(url);
diff --git a/webapp/components/post_view/post_list.jsx b/webapp/components/post_view/post_list.jsx
index b630a7d6a..ee0fcb99b 100644
--- a/webapp/components/post_view/post_list.jsx
+++ b/webapp/components/post_view/post_list.jsx
@@ -174,9 +174,9 @@ export default class PostList extends React.PureComponent {
         }
     }
 
-    componentDidUpdate(prevProps) {
-        // Do not update scrolling unless posts change
-        if (this.props.posts === prevProps.posts) {
+    componentDidUpdate(prevProps, prevState) {
+        // Do not update scrolling unless posts, visibility or intro message change
+        if (this.props.posts === prevProps.posts && this.props.postVisibility === prevProps.postVisibility && this.state.atEnd === prevState.atEnd) {
             return;
         }
 
@@ -191,7 +191,7 @@ export default class PostList extends React.PureComponent {
                 const element = ReactDOM.findDOMNode(focusedPost);
                 const rect = element.getBoundingClientRect();
                 const listHeight = postList.clientHeight / 2;
-                postList.scrollTop += postList.scrollTop + (rect.top - listHeight);
+                postList.scrollTop += rect.top - listHeight;
             } else if (this.previousScrollHeight !== postList.scrollHeight && posts[0].id === prevPosts[0].id) {
                 postList.scrollTop = this.previousScrollTop + (postList.scrollHeight - this.previousScrollHeight);
             }
@@ -204,7 +204,7 @@ export default class PostList extends React.PureComponent {
             const element = ReactDOM.findDOMNode(messageSeparator);
             element.scrollIntoView();
             return;
-        } else if (this.refs.postlist && !this.hasScrolledToNewMessageSeparator) {
+        } else if (postList && !this.hasScrolledToNewMessageSeparator) {
             postList.scrollTop = postList.scrollHeight;
             return;
         }
@@ -356,7 +356,9 @@ export default class PostList extends React.PureComponent {
     }
 
     scrollToBottom = () => {
-        this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
+        if (this.refs.postlist) {
+            this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
+        }
     }
 
     createPosts = (posts) => {