PLT-4600 Properly clear autocomplete suggestions when suggestions are out of date (#4529)

* PLT-4600 Better clear autocomplete suggestions when suggestions are out of date

* Fixed react warnings and removed an eslint ignore

2 files changed, 16 insertions, 5 deletions

diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index 464e57ef2..eeae5ba28 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -2,7 +2,6 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
-import ReactDOM from 'react-dom';
 
 import Constants from 'utils/constants.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
@@ -37,6 +36,13 @@ export default class SuggestionBox extends React.Component {
         SuggestionStore.addPretextChangedListener(this.suggestionId, this.handlePretextChanged);
     }
 
+    componentWillReceiveProps(nextProps) {
+        // Clear any suggestions when the SuggestionBox is cleared
+        if (nextProps.value === '' && this.props.value !== nextProps.value) {
+            GlobalActions.emitClearSuggestions(this.suggestionId);
+        }
+    }
+
     componentWillUnmount() {
         SuggestionStore.removeCompleteWordListener(this.suggestionId, this.handleCompleteWord);
         SuggestionStore.removePretextChangedListener(this.suggestionId, this.handlePretextChanged);
@@ -64,7 +70,7 @@ export default class SuggestionBox extends React.Component {
             return;
         }
 
-        const container = $(ReactDOM.findDOMNode(this));
+        const container = $(this.refs.container);
 
         if (!(container.is(e.target) || container.has(e.target).length > 0)) {
             // We can't just use blur for this because it fires and hides the children before
@@ -198,7 +204,7 @@ export default class SuggestionBox extends React.Component {
         const SuggestionListComponent = listComponent;
 
         return (
-            <div>
+            <div ref='container'>
                 {textbox}
                 <SuggestionListComponent
                     suggestionId={this.suggestionId}
@@ -239,6 +245,5 @@ SuggestionBox.propTypes = {
 
     // explicitly name any input event handlers we override and need to manually call
     onChange: React.PropTypes.func,
-    onBlur: React.PropTypes.func,
     onKeyDown: React.PropTypes.func
 };
diff --git a/webapp/stores/suggestion_store.jsx b/webapp/stores/suggestion_store.jsx
index 75221421f..d87b07076 100644
--- a/webapp/stores/suggestion_store.jsx
+++ b/webapp/stores/suggestion_store.jsx
@@ -121,6 +121,11 @@ class SuggestionStore extends EventEmitter {
     }
 
     addSuggestions(id, terms, items, component, matchedPretext) {
+        if (this.getPretext(id) !== matchedPretext) {
+            // These suggestions are out of date since the pretext has changed
+            return;
+        }
+
         const suggestion = this.suggestions.get(id);
 
         suggestion.terms.push(...terms);
@@ -218,7 +223,7 @@ class SuggestionStore extends EventEmitter {
     }
 
     handleEventPayload(payload) {
-        const {type, id, ...other} = payload.action; // eslint-disable-line no-use-before-define
+        const {type, id, ...other} = payload.action;
 
         switch (type) {
         case ActionTypes.SUGGESTION_PRETEXT_CHANGED:
@@ -243,6 +248,7 @@ class SuggestionStore extends EventEmitter {
             this.emitSuggestionsChanged(id);
             break;
         case ActionTypes.SUGGESTION_CLEAR_SUGGESTIONS:
+            this.setPretext(id, '');
             this.clearSuggestions(id);
             this.clearSelection(id);
             this.emitSuggestionsChanged(id);