Changed SuggestionBox to clear suggestions shortly after losing focus (#4721)

3 files changed, 21 insertions, 32 deletions

diff --git a/webapp/components/suggestion/search_suggestion_list.jsx b/webapp/components/suggestion/search_suggestion_list.jsx
index 628f93af0..99262109a 100644
--- a/webapp/components/suggestion/search_suggestion_list.jsx
+++ b/webapp/components/suggestion/search_suggestion_list.jsx
@@ -12,6 +12,10 @@ import {FormattedMessage} from 'react-intl';
 import {Popover} from 'react-bootstrap';
 
 export default class SearchSuggestionList extends SuggestionList {
+    static propTypes = {
+        ...SuggestionList.propTypes
+    };
+
     getContent() {
         return $(ReactDOM.findDOMNode(this.refs.popover)).find('.popover-content');
     }
@@ -92,7 +96,3 @@ export default class SearchSuggestionList extends SuggestionList {
         );
     }
 }
-
-SearchSuggestionList.propTypes = {
-    ...SuggestionList.propTypes
-};
diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index 67a29fec3..2fb44a340 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -1,8 +1,6 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
-
 import Constants from 'utils/constants.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import SuggestionStore from 'stores/suggestion_store.jsx';
@@ -18,7 +16,7 @@ export default class SuggestionBox extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleDocumentClick = this.handleDocumentClick.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
 
         this.handleCompleteWord = this.handleCompleteWord.bind(this);
         this.handleChange = this.handleChange.bind(this);
@@ -36,8 +34,6 @@ export default class SuggestionBox extends React.Component {
     }
 
     componentDidMount() {
-        $(document).on('click', this.handleDocumentClick);
-
         SuggestionStore.addCompleteWordListener(this.suggestionId, this.handleCompleteWord);
         SuggestionStore.addPretextChangedListener(this.suggestionId, this.handlePretextChanged);
     }
@@ -55,7 +51,6 @@ export default class SuggestionBox extends React.Component {
         SuggestionStore.removePretextChangedListener(this.suggestionId, this.handlePretextChanged);
 
         SuggestionStore.unregisterSuggestionBox(this.suggestionId);
-        $(document).off('click', this.handleDocumentClick);
     }
 
     getTextbox() {
@@ -72,18 +67,11 @@ export default class SuggestionBox extends React.Component {
         }
     }
 
-    handleDocumentClick(e) {
-        if (!SuggestionStore.hasSuggestions(this.suggestionId)) {
-            return;
-        }
-
-        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
-            // their click handlers can be called
+    handleBlur() {
+        setTimeout(() => {
+            // Delay this slightly so that we don't clear the suggestions before we run click handlers on SuggestionList
             GlobalActions.emitClearSuggestions(this.suggestionId);
-        }
+        }, 100);
     }
 
     handleChange(e) {
@@ -214,6 +202,7 @@ export default class SuggestionBox extends React.Component {
 
         const childProps = {
             ref: 'textbox',
+            onBlur: this.handleBlur,
             onInput: this.handleChange,
             onCompositionStart: this.handleCompositionStart,
             onCompositionUpdate: this.handleCompositionUpdate,
diff --git a/webapp/components/suggestion/suggestion_list.jsx b/webapp/components/suggestion/suggestion_list.jsx
index 0c2dbf784..18d45242a 100644
--- a/webapp/components/suggestion/suggestion_list.jsx
+++ b/webapp/components/suggestion/suggestion_list.jsx
@@ -10,6 +10,16 @@ import {FormattedMessage} from 'react-intl';
 import React from 'react';
 
 export default class SuggestionList extends React.Component {
+    static propTypes = {
+        suggestionId: React.PropTypes.string.isRequired,
+        location: React.PropTypes.string,
+        renderDividers: React.PropTypes.bool
+    };
+
+    static defaultProps = {
+        renderDividers: false
+    };
+
     constructor(props) {
         super(props);
 
@@ -65,7 +75,7 @@ export default class SuggestionList extends React.Component {
 
     scrollToItem(term) {
         const content = this.getContent();
-        if (!content) {
+        if (!content || content.length === 0) {
             return;
         }
 
@@ -153,13 +163,3 @@ export default class SuggestionList extends React.Component {
         );
     }
 }
-
-SuggestionList.propTypes = {
-    suggestionId: React.PropTypes.string.isRequired,
-    location: React.PropTypes.string,
-    renderDividers: React.PropTypes.bool
-};
-
-SuggestionList.defaultProps = {
-    renderDividers: false
-};