3 files changed, 21 insertions, 5 deletions

diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx
index a2a446de2..91d556bb9 100644
--- a/web/react/components/suggestion/command_provider.jsx
+++ b/web/react/components/suggestion/command_provider.jsx
@@ -39,7 +39,6 @@ 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/emoticon_provider.jsx b/web/react/components/suggestion/emoticon_provider.jsx
index 7dcb86442..fd470cf21 100644
--- a/web/react/components/suggestion/emoticon_provider.jsx
+++ b/web/react/components/suggestion/emoticon_provider.jsx
@@ -51,23 +51,40 @@ export default class EmoticonProvider {
             const text = captured[1];
             const partialName = captured[2];
 
-            const terms = [];
             const names = [];
 
             for (const emoticon of Emoticons.emoticonMap.keys()) {
                 if (emoticon.indexOf(partialName) !== -1) {
-                    terms.push(':' + emoticon + ':');
                     names.push(emoticon);
 
-                    if (terms.length >= MAX_EMOTICON_SUGGESTIONS) {
+                    if (names.length >= MAX_EMOTICON_SUGGESTIONS) {
                         break;
                     }
                 }
             }
 
+            // sort the emoticons so that emoticons starting with the entered text come first
+            names.sort((a, b) => {
+                const aPrefix = a.startsWith(partialName);
+                const bPrefix = b.startsWith(partialName);
+
+                if (aPrefix === bPrefix) {
+                    return a.localeCompare(b);
+                } else if (aPrefix) {
+                    return -1;
+                }
+
+                return 1;
+            });
+
+            const terms = names.map((name) => ':' + name + ':');
+
             if (terms.length > 0) {
                 SuggestionStore.setMatchedPretext(suggestionId, text);
                 SuggestionStore.addSuggestions(suggestionId, terms, names, EmoticonSuggestion);
+
+                // force the selection to be cleared since the order of elements may have changed
+                SuggestionStore.clearSelection(suggestionId);
             }
         }
     }
diff --git a/web/react/components/suggestion/suggestion_box.jsx b/web/react/components/suggestion/suggestion_box.jsx
index ad8ad1e9e..57a33c24a 100644
--- a/web/react/components/suggestion/suggestion_box.jsx
+++ b/web/react/components/suggestion/suggestion_box.jsx
@@ -94,7 +94,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.ENTER || e.which === KeyCodes.TAB || (e.which === KeyCodes.SPACE && SuggestionStore.shouldCompleteOnSpace(this.suggestionId))) {
+            } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.TAB) {
                 EventHelpers.emitCompleteWordSuggestion(this.suggestionId);
                 e.preventDefault();
             } else if (this.props.onKeyDown) {