Fixed SuggestionLists to properly hide when the textbox loses focus

3 files changed, 11 insertions, 7 deletions

diff --git a/web/react/components/search_suggestion_list.jsx b/web/react/components/search_suggestion_list.jsx
index 739b7199d..1549e90d5 100644
--- a/web/react/components/search_suggestion_list.jsx
+++ b/web/react/components/search_suggestion_list.jsx
@@ -35,7 +35,7 @@ export default class SearchSuggestionList extends SuggestionList {
     }
 
     render() {
-        if (this.state.items.length === 0) {
+        if (this.state.items.length === 0 || !this.props.show) {
             return null;
         }
 
@@ -82,5 +82,5 @@ export default class SearchSuggestionList extends SuggestionList {
 }
 
 SearchSuggestionList.propTypes = {
-    suggestionId: React.PropTypes.string.isRequired
+    ...SuggestionList.propTypes
 };
diff --git a/web/react/components/suggestion_box.jsx b/web/react/components/suggestion_box.jsx
index 5510ba340..3fff5b754 100644
--- a/web/react/components/suggestion_box.jsx
+++ b/web/react/components/suggestion_box.jsx
@@ -147,8 +147,6 @@ export default class SuggestionBox extends React.Component {
     }
 
     render() {
-        const SuggestionList = this.props.listComponent;
-
         const newProps = Object.assign({}, this.props, {
             onFocus: this.handleFocus,
             onChange: this.handleChange,
@@ -173,10 +171,15 @@ export default class SuggestionBox extends React.Component {
             );
         }
 
+        const SuggestionListComponent = this.props.listComponent;
+
         return (
             <div>
                 {textbox}
-                <SuggestionList suggestionId={this.suggestionId} />
+                <SuggestionListComponent
+                    suggestionId={this.suggestionId}
+                    show={this.state.focused}
+                />
             </div>
         );
     }
diff --git a/web/react/components/suggestion_list.jsx b/web/react/components/suggestion_list.jsx
index ec3888ebb..3b7c4dd7d 100644
--- a/web/react/components/suggestion_list.jsx
+++ b/web/react/components/suggestion_list.jsx
@@ -87,7 +87,7 @@ export default class SuggestionList extends React.Component {
     }
 
     render() {
-        if (this.state.items.length === 0) {
+        if (this.state.items.length === 0 || !this.props.show) {
             return null;
         }
 
@@ -125,5 +125,6 @@ export default class SuggestionList extends React.Component {
 }
 
 SuggestionList.propTypes = {
-    suggestionId: React.PropTypes.string.isRequired
+    suggestionId: React.PropTypes.string.isRequired,
+    show: React.PropTypes.bool.isRequired
 };