make suggestion box focus more robust, require more explicit enabling (#7123)

2 files changed, 19 insertions, 7 deletions

diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index 11fda2643..545693cac 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -85,7 +85,12 @@ export default class SuggestionBox extends React.Component {
         /**
          * The number of characters required to show the suggestion list, defaults to 1
          */
-        requiredCharacters: PropTypes.number
+        requiredCharacters: PropTypes.number,
+
+        /**
+         * If true, the suggestion box is opened on focus, default to false
+         */
+        openOnFocus: PropTypes.bool
     }
 
     static defaultProps = {
@@ -94,7 +99,8 @@ export default class SuggestionBox extends React.Component {
         renderDividers: false,
         completeOnTab: true,
         isRHS: false,
-        requiredCharacters: 1
+        requiredCharacters: 1,
+        openOnFocus: false
     }
 
     constructor(props) {
@@ -145,7 +151,7 @@ export default class SuggestionBox extends React.Component {
     }
 
     getTextbox() {
-        if (this.props.type === 'textarea') {
+        if (this.props.type === 'textarea' && this.refs.textbox) {
             const node = this.refs.textbox.getDOMNode();
             return node;
         }
@@ -171,12 +177,16 @@ export default class SuggestionBox extends React.Component {
     }
 
     handleFocus() {
+        if (!this.props.openOnFocus) {
+            return;
+        }
         setTimeout(() => {
             const textbox = this.getTextbox();
-            const pretext = textbox.value.substring(0, textbox.selectionEnd);
-
-            if (pretext.length >= this.props.requiredCharacters) {
-                GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext);
+            if (textbox) {
+                const pretext = textbox.value.substring(0, textbox.selectionEnd);
+                if (pretext.length >= this.props.requiredCharacters) {
+                    GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext);
+                }
             }
         });
     }
@@ -346,6 +356,7 @@ export default class SuggestionBox extends React.Component {
         Reflect.deleteProperty(props, 'isRHS');
         Reflect.deleteProperty(props, 'popoverMentionKeyClick');
         Reflect.deleteProperty(props, 'requiredCharacters');
+        Reflect.deleteProperty(props, 'openOnFocus');
 
         const childProps = {
             ref: 'textbox',
diff --git a/webapp/plugins/jira/components/settings.jsx b/webapp/plugins/jira/components/settings.jsx
index c0f7a0a7b..87a44794b 100644
--- a/webapp/plugins/jira/components/settings.jsx
+++ b/webapp/plugins/jira/components/settings.jsx
@@ -206,6 +206,7 @@ export default class JIRASettings extends AdminSettings {
                             disabled={!this.state.enabled}
                             type='input'
                             requiredCharacters={0}
+                            openOnFocus={true}
                         />
                     </div>
                 </Setting>