Merge pull request #1605 from hmhealey/plt1370

PLT-1370 Changed SuggestionBox to clear its suggestions on losing focus

web/react/components/suggestion/search_suggestion_list.jsx

@@ -35,7 +35,7 @@ export default class SearchSuggestionList extends SuggestionList {
     }
 
     render() {
-        if (this.state.items.length === 0 || !this.props.show) {
+        if (this.state.items.length === 0) {
             return null;
         }
 

web/react/components/suggestion/suggestion_box.jsx

@@ -13,7 +13,6 @@ export default class SuggestionBox extends React.Component {
         super(props);
 
         this.handleDocumentClick = this.handleDocumentClick.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
 
         this.handleChange = this.handleChange.bind(this);
         this.handleCompleteWord = this.handleCompleteWord.bind(this);
@@ -21,10 +20,6 @@ export default class SuggestionBox extends React.Component {
         this.handlePretextChanged = this.handlePretextChanged.bind(this);
 
         this.suggestionId = Utils.generateId();
-
-        this.state = {
-            focused: false
-        };
     }
 
     componentDidMount() {
@@ -49,27 +44,11 @@ export default class SuggestionBox extends React.Component {
     }
 
     handleDocumentClick(e) {
-        if (!this.state.focused) {
-            return;
-        }
-
         const container = $(ReactDOM.findDOMNode(this));
         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
             // their click handlers can be called
-            this.setState({
+            EventHelpers.emitClearSuggestions(this.suggestionId);
-                focused: false
-            });
-        }
-    }
-
-    handleFocus() {
-        this.setState({
-            focused: true
-        });
-
-        if (this.props.onFocus) {
-            this.props.onFocus();
         }
     }
 
@@ -134,7 +113,6 @@ export default class SuggestionBox extends React.Component {
 
     render() {
         const newProps = Object.assign({}, this.props, {
-            onFocus: this.handleFocus,
             onChange: this.handleChange,
             onKeyDown: this.handleKeyDown
         });
@@ -162,10 +140,7 @@ export default class SuggestionBox extends React.Component {
         return (
             <div>
                 {textbox}
-                <SuggestionListComponent
+                <SuggestionListComponent suggestionId={this.suggestionId} />
-                    suggestionId={this.suggestionId}
-                    show={this.state.focused}
-                />
             </div>
         );
     }
@@ -184,6 +159,5 @@ SuggestionBox.propTypes = {
 
     // explicitly name any input event handlers we override and need to manually call
     onChange: React.PropTypes.func,
-    onKeyDown: React.PropTypes.func,
+    onKeyDown: React.PropTypes.func
-    onFocus: React.PropTypes.func
 };

web/react/components/suggestion/suggestion_list.jsx

@@ -82,7 +82,7 @@ export default class SuggestionList extends React.Component {
     }
 
     render() {
-        if (this.state.items.length === 0 || !this.props.show) {
+        if (this.state.items.length === 0) {
             return null;
         }
 
@@ -121,6 +121,5 @@ export default class SuggestionList extends React.Component {
 }
 
 SuggestionList.propTypes = {
-    suggestionId: React.PropTypes.string.isRequired,
+    suggestionId: React.PropTypes.string.isRequired
-    show: React.PropTypes.bool.isRequired
 };

web/react/dispatcher/event_helpers.jsx

@@ -141,3 +141,10 @@ export function emitCompleteWordSuggestion(suggestionId, term = '') {
         term
     });
 }
+
+export function emitClearSuggestions(suggestionId) {
+    AppDispatcher.handleViewAction({
+        type: Constants.ActionTypes.SUGGESTION_CLEAR_SUGGESTIONS,
+        id: suggestionId
+    });
+}

web/react/stores/suggestion_store.jsx

@@ -244,6 +244,11 @@ class SuggestionStore extends EventEmitter {
                 this.emitSuggestionsChanged(id);
             }
             break;
+        case ActionTypes.SUGGESTION_CLEAR_SUGGESTIONS:
+            this.clearSuggestions(id);
+            this.clearSelection(id);
+            this.emitSuggestionsChanged(id);
+            break;
         case ActionTypes.SUGGESTION_SELECT_NEXT:
             this.selectNext(id);
             this.emitSuggestionsChanged(id);

web/react/utils/constants.jsx

@@ -55,6 +55,7 @@ export default {
 
         SUGGESTION_PRETEXT_CHANGED: null,
         SUGGESTION_RECEIVED_SUGGESTIONS: null,
+        SUGGESTION_CLEAR_SUGGESTIONS: null,
         SUGGESTION_COMPLETE_WORD: null,
         SUGGESTION_SELECT_NEXT: null,
         SUGGESTION_SELECT_PREVIOUS: null