PLT-6282 Make post list stay visible when post textbox height changes (#6323)

* PLT-6282 Changed post drafts to use an action when being stored

* PLT-6282 Triggered post list to update scroll position when post draft changes

* PLT-6282 Changed SuggestionBox to complete suggestions without an event

2 files changed, 30 insertions, 11 deletions

diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
index 0d1244c55..f79cbec19 100644
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -21,6 +21,7 @@ import * as ChannelActions from 'actions/channel_actions.jsx';
 import Constants from 'utils/constants.jsx';
 const ScrollTypes = Constants.ScrollTypes;
 
+import PostStore from 'stores/post_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 
 import {FormattedDate, FormattedMessage} from 'react-intl';
@@ -96,6 +97,11 @@ export default class PostList extends React.Component {
             }, 0);
         }
         this.setState({unViewedCount});
+
+        if (this.props.channelId !== nextProps.channelId) {
+            PostStore.removePostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
+            PostStore.addPostDraftChangeListener(nextProps.channelId, this.handlePostDraftChange);
+        }
     }
 
     handleKeyDown(e) {
@@ -527,6 +533,16 @@ export default class PostList extends React.Component {
 
         window.addEventListener('resize', this.handleResize);
         window.addEventListener('keydown', this.handleKeyDown);
+
+        PostStore.addPostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
+    }
+
+    handlePostDraftChange = (draft) => {
+        // this.state.draft isn't used anywhere, but this will cause an update to the scroll position
+        // without causing two updates to trigger when something else changes
+        this.setState({
+            draft
+        });
     }
 
     componentWillUnmount() {
@@ -534,6 +550,8 @@ export default class PostList extends React.Component {
         window.removeEventListener('resize', this.handleResize);
         window.removeEventListener('keydown', this.handleKeyDown);
         this.scrollStopAction.cancel();
+
+        PostStore.removePostDraftChangeListener(this.handlePostDraftChange);
     }
 
     componentDidUpdate() {
@@ -545,13 +563,6 @@ export default class PostList extends React.Component {
     }
 
     render() {
-        if (this.props.postList == null) {
-            return <div/>;
-        }
-
-        const posts = this.props.postList.posts;
-        const order = this.props.postList.order;
-
         // Create intro message or top loadmore link
         let moreMessagesTop;
         if (this.props.showMoreMessagesTop) {
@@ -588,11 +599,17 @@ export default class PostList extends React.Component {
         }
 
         // Create post elements
-        const postElements = this.createPosts(posts, order);
-
+        let postElements = null;
         let topPostCreateAt = 0;
-        if (this.state.topPostId && this.props.postList.posts[this.state.topPostId]) {
-            topPostCreateAt = this.props.postList.posts[this.state.topPostId].create_at;
+        if (this.props.postList) {
+            const posts = this.props.postList.posts;
+            const order = this.props.postList.order;
+
+            postElements = this.createPosts(posts, order);
+
+            if (this.state.topPostId && this.props.postList.posts[this.state.topPostId]) {
+                topPostCreateAt = this.props.postList.posts[this.state.topPostId].create_at;
+            }
         }
 
         return (
@@ -642,6 +659,7 @@ PostList.propTypes = {
     postList: PropTypes.object,
     profiles: PropTypes.object,
     channel: PropTypes.object,
+    channelId: PropTypes.string.isRequired,
     currentUser: PropTypes.object,
     scrollPostId: PropTypes.string,
     scrollType: PropTypes.number,
diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx
index 2d4afb7d7..12112ac10 100644
--- a/webapp/components/post_view/post_view_controller.jsx
+++ b/webapp/components/post_view/post_view_controller.jsx
@@ -363,6 +363,7 @@ export default class PostViewController extends React.Component {
                 <PostList
                     postList={this.state.postList}
                     profiles={this.state.profiles}
+                    channelId={this.state.channel.id}
                     channel={this.state.channel}
                     currentUser={this.state.currentUser}
                     showMoreMessagesTop={!this.state.atTop}