Changed Command autocomplete to pick a suggestion when space is pressed

3 files changed, 16 insertions, 2 deletions

diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx
index a1f7901ef..6a7c1ce43 100644
--- a/web/react/components/suggestion/command_provider.jsx
+++ b/web/react/components/suggestion/command_provider.jsx
@@ -40,6 +40,7 @@ export default class CommandProvider {
     handlePretextChanged(suggestionId, pretext) {
         if (pretext.startsWith('/')) {
             SuggestionStore.setMatchedPretext(suggestionId, pretext);
+            SuggestionStore.setCompleteOnSpace(suggestionId, false);
 
             AsyncClient.getSuggestedCommands(pretext, suggestionId, CommandSuggestion);
         }
diff --git a/web/react/components/suggestion/suggestion_box.jsx b/web/react/components/suggestion/suggestion_box.jsx
index d8493f92a..10e864b63 100644
--- a/web/react/components/suggestion/suggestion_box.jsx
+++ b/web/react/components/suggestion/suggestion_box.jsx
@@ -116,7 +116,7 @@ export default class SuggestionBox extends React.Component {
             } else if (e.which === KeyCodes.DOWN) {
                 EventHelpers.emitSelectNextSuggestion(this.suggestionId);
                 e.preventDefault();
-            } else if (e.which === KeyCodes.SPACE || e.which === KeyCodes.ENTER) {
+            } else if (e.which === KeyCodes.ENTER || (e.which === KeyCodes.SPACE && SuggestionStore.shouldCompleteOnSpace(this.suggestionId))) {
                 EventHelpers.emitCompleteWordSuggestion(this.suggestionId);
                 e.preventDefault();
             } else if (this.props.onKeyDown) {
diff --git a/web/react/stores/suggestion_store.jsx b/web/react/stores/suggestion_store.jsx
index 5bd13b02d..182f5810f 100644
--- a/web/react/stores/suggestion_store.jsx
+++ b/web/react/stores/suggestion_store.jsx
@@ -38,6 +38,7 @@ class SuggestionStore extends EventEmitter {
         // items: a list of objects backing the terms which may be used in rendering
         // components: a list of react components that can be used to render their corresponding item
         // selection: the term currently selected by the keyboard
+        // completeOnSpace: whether or not space will trigger the term to be autocompleted
         this.suggestions = new Map();
     }
 
@@ -78,7 +79,8 @@ class SuggestionStore extends EventEmitter {
             terms: [],
             items: [],
             components: [],
-            selection: ''
+            selection: '',
+            completeOnSpace: true
         });
     }
 
@@ -93,6 +95,7 @@ class SuggestionStore extends EventEmitter {
         suggestion.terms = [];
         suggestion.items = [];
         suggestion.components = [];
+        suggestion.completeOnSpace = true;
     }
 
     clearSelection(id) {
@@ -117,6 +120,12 @@ class SuggestionStore extends EventEmitter {
         suggestion.matchedPretext = matchedPretext;
     }
 
+    setCompleteOnSpace(id, completeOnSpace) {
+        const suggestion = this.suggestions.get(id);
+
+        suggestion.completeOnSpace = completeOnSpace;
+    }
+
     addSuggestion(id, term, item, component) {
         const suggestion = this.suggestions.get(id);
 
@@ -180,6 +189,10 @@ class SuggestionStore extends EventEmitter {
         return this.suggestions.get(id).selection;
     }
 
+    shouldCompleteOnSpace(id) {
+        return this.suggestions.get(id).completeOnSpace;
+    }
+
     selectNext(id) {
         this.setSelectionByDelta(id, 1);
     }