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, 11 insertions, 15 deletions

diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index c70e8d5ae..1915b22b7 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -37,12 +37,10 @@ export default class SuggestionBox extends React.Component {
     }
 
     componentDidMount() {
-        SuggestionStore.addCompleteWordListener(this.suggestionId, this.handleCompleteWord);
         SuggestionStore.addPretextChangedListener(this.suggestionId, this.handlePretextChanged);
     }
 
     componentWillUnmount() {
-        SuggestionStore.removeCompleteWordListener(this.suggestionId, this.handleCompleteWord);
         SuggestionStore.removePretextChangedListener(this.suggestionId, this.handlePretextChanged);
 
         SuggestionStore.unregisterSuggestionBox(this.suggestionId);
@@ -161,6 +159,8 @@ export default class SuggestionBox extends React.Component {
                 provider.handleCompleteWord(term, matchedPretext);
             }
         }
+
+        GlobalActions.emitCompleteWordSuggestion(this.suggestionId);
     }
 
     handleKeyDown(e) {
@@ -172,7 +172,7 @@ export default class SuggestionBox extends React.Component {
                 GlobalActions.emitSelectNextSuggestion(this.suggestionId);
                 e.preventDefault();
             } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.TAB) {
-                GlobalActions.emitCompleteWordSuggestion(this.suggestionId);
+                this.handleCompleteWord(SuggestionStore.getSelection(this.suggestionId), SuggestionStore.getSelectedMatchedPretext(this.suggestionId));
                 this.props.onKeyDown(e);
                 e.preventDefault();
             } else if (e.which === KeyCodes.ESCAPE) {
@@ -212,6 +212,7 @@ export default class SuggestionBox extends React.Component {
 
         // Don't pass props used by SuggestionBox
         Reflect.deleteProperty(props, 'providers');
+        Reflect.deleteProperty(props, 'onChange'); // We use onInput instead of onChange on the actual input
         Reflect.deleteProperty(props, 'onItemSelected');
 
         const childProps = {
@@ -260,6 +261,7 @@ export default class SuggestionBox extends React.Component {
                     suggestionId={this.suggestionId}
                     location={listStyle}
                     renderDividers={renderDividers}
+                    onCompleteWord={this.handleCompleteWord}
                 />
             </div>
         );
diff --git a/webapp/components/suggestion/suggestion_list.jsx b/webapp/components/suggestion/suggestion_list.jsx
index bc2245077..59f0d02f8 100644
--- a/webapp/components/suggestion/suggestion_list.jsx
+++ b/webapp/components/suggestion/suggestion_list.jsx
@@ -2,20 +2,19 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import * as GlobalActions from 'actions/global_actions.jsx';
-import SuggestionStore from 'stores/suggestion_store.jsx';
 import {FormattedMessage} from 'react-intl';
 
-import PropTypes from 'prop-types';
-
-import React from 'react';
+import SuggestionStore from 'stores/suggestion_store.jsx';
 
 export default class SuggestionList extends React.Component {
     static propTypes = {
         suggestionId: PropTypes.string.isRequired,
         location: PropTypes.string,
-        renderDividers: PropTypes.bool
+        renderDividers: PropTypes.bool,
+        onCompleteWord: PropTypes.func.isRequired
     };
 
     static defaultProps = {
@@ -29,7 +28,6 @@ export default class SuggestionList extends React.Component {
 
         this.getContent = this.getContent.bind(this);
 
-        this.handleItemClick = this.handleItemClick.bind(this);
         this.handleSuggestionsChanged = this.handleSuggestionsChanged.bind(this);
 
         this.scrollToItem = this.scrollToItem.bind(this);
@@ -67,10 +65,6 @@ export default class SuggestionList extends React.Component {
         return $(ReactDOM.findDOMNode(this.refs.content));
     }
 
-    handleItemClick(term, matchedPretext) {
-        GlobalActions.emitCompleteWordSuggestion(this.props.suggestionId, term, matchedPretext);
-    }
-
     handleSuggestionsChanged() {
         this.setState(this.getStateFromStores());
     }
@@ -145,7 +139,7 @@ export default class SuggestionList extends React.Component {
                     term={term}
                     matchedPretext={this.state.matchedPretext[i]}
                     isSelection={isSelection}
-                    onClick={this.handleItemClick}
+                    onClick={this.props.onCompleteWord}
                 />
             );
         }