PLT-6431 Prevented autocompleting while suggestions are being received (#6328)

webapp/components/suggestion/at_mention_provider.jsx

@@ -113,7 +113,7 @@ export default class AtMentionProvider extends Provider {
 
         const prefix = captured[1];
 
-        this.startNewRequest(prefix);
+        this.startNewRequest(suggestionId, prefix);
 
         autocompleteUsersInChannel(
             prefix,

webapp/components/suggestion/channel_mention_provider.jsx

@@ -75,7 +75,7 @@ export default class ChannelMentionProvider extends Provider {
 
         const prefix = captured[3];
 
-        this.startNewRequest(prefix);
+        this.startNewRequest(suggestionId, prefix);
 
         autocompleteChannels(
             prefix,

webapp/components/suggestion/provider.jsx

@@ -1,6 +1,8 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import SuggestionStore from 'stores/suggestion_store.jsx';
+
 export default class Provider {
     constructor() {
         this.latestPrefix = '';
@@ -11,9 +13,12 @@ export default class Provider {
         // NO-OP for inherited classes to override
     }
 
-    startNewRequest(prefix) {
+    startNewRequest(suggestionId, prefix) {
         this.latestPrefix = prefix;
         this.latestComplete = false;
+
+        // Don't use the dispatcher here since this is only called while handling an event
+        SuggestionStore.setSuggestionsPending(suggestionId, true);
     }
 
     shouldCancelDispatch(prefix) {

webapp/components/suggestion/search_channel_provider.jsx

@@ -40,7 +40,7 @@ export default class SearchChannelProvider extends Provider {
         if (captured) {
             const channelPrefix = captured[1];
 
-            this.startNewRequest(channelPrefix);
+            this.startNewRequest(suggestionId, channelPrefix);
 
             autocompleteChannels(
                 channelPrefix,

webapp/components/suggestion/search_user_provider.jsx

@@ -63,7 +63,7 @@ export default class SearchUserProvider extends Provider {
         if (captured) {
             const usernamePrefix = captured[1];
 
-            this.startNewRequest(usernamePrefix);
+            this.startNewRequest(suggestionId, usernamePrefix);
 
             autocompleteUsersInTeam(
                 usernamePrefix,

webapp/components/suggestion/switch_channel_provider.jsx

@@ -60,7 +60,7 @@ class SwitchChannelSuggestion extends Suggestion {
 export default class SwitchChannelProvider extends Provider {
     handlePretextChanged(suggestionId, channelPrefix) {
         if (channelPrefix) {
-            this.startNewRequest(channelPrefix);
+            this.startNewRequest(suggestionId, channelPrefix);
 
             const allChannels = ChannelStore.getAll();
             const channels = [];

webapp/stores/suggestion_store.jsx

@@ -222,6 +222,31 @@ class SuggestionStore extends EventEmitter {
         return pretext.endsWith(matchedPretext);
     }
 
+    setSuggestionsPending(id, pending) {
+        this.suggestions.get(id).suggestionsPending = pending;
+    }
+
+    areSuggestionsPending(id) {
+        return this.suggestions.get(id).suggestionsPending;
+    }
+
+    setCompletePending(id, pending) {
+        this.suggestions.get(id).completePending = pending;
+    }
+
+    isCompletePending(id) {
+        return this.suggestions.get(id).completePending;
+    }
+
+    completeWord(id, term = '', matchedPretext = '') {
+        this.emitCompleteWord(id, term || this.getSelection(id), matchedPretext || this.getSelectedMatchedPretext(id));
+
+        this.setPretext(id, '');
+        this.clearSuggestions(id);
+        this.clearSelection(id);
+        this.emitSuggestionsChanged(id);
+    }
+
     handleEventPayload(payload) {
         const {type, id, ...other} = payload.action;
 
@@ -248,9 +273,15 @@ class SuggestionStore extends EventEmitter {
 
             this.clearSuggestions(id);
             this.addSuggestions(id, other.terms, other.items, other.component, other.matchedPretext);
-
             this.ensureSelectionExists(id);
-            this.emitSuggestionsChanged(id);
+
+            this.setSuggestionsPending(id, false);
+
+            if (this.isCompletePending(id)) {
+                this.completeWord(id);
+            } else {
+                this.emitSuggestionsChanged(id);
+            }
             break;
         case ActionTypes.SUGGESTION_CLEAR_SUGGESTIONS:
             this.setPretext(id, '');
@@ -267,12 +298,11 @@ class SuggestionStore extends EventEmitter {
             this.emitSuggestionsChanged(id);
             break;
         case ActionTypes.SUGGESTION_COMPLETE_WORD:
-            this.emitCompleteWord(id, other.term || this.getSelection(id), other.matchedPretext || this.getSelectedMatchedPretext(id));
+            if (this.areSuggestionsPending(id)) {
-
+                this.setCompletePending(id, true);
-            this.setPretext(id, '');
+            } else {
-            this.clearSuggestions(id);
+                this.completeWord(id, other.term, other.matchedPretext);
-            this.clearSelection(id);
+            }
-            this.emitSuggestionsChanged(id);
             break;
         }
     }