Fixed ChannelMentionProvider matching completed mentions (#5188)

webapp/components/suggestion/channel_mention_provider.jsx

@@ -51,22 +51,29 @@ class ChannelMentionSuggestion extends Suggestion {
 }
 
 export default class ChannelMentionProvider extends Provider {
+    constructor() {
+        super();
+
+        this.lastCompletedWord = '';
+    }
+
     handlePretextChanged(suggestionId, pretext) {
-        const captured = (/(^|\s)(~([^~]*))$/i).exec(pretext.toLowerCase());
+        const captured = (/(^|\s)(~([^~\r\n]*))$/i).exec(pretext.toLowerCase());
-        if (captured) {
-            const prefix = captured[3];
 
-            if ((/\s/).test(prefix)) {
+        if (!captured) {
-                // If there's a space, there's a chance that we've already completed this mention
+            // Not a channel mention
-                const firstWordOfPrefix = prefix.split(' ')[0];
-
-                for (const channel of ChannelStore.getChannels()) {
-                    if (firstWordOfPrefix === channel.name) {
-                        // We've already mentioned this channel so there's nothing else to look for
             return;
         }
+
+        if (this.lastCompletedWord && captured[0].startsWith(this.lastCompletedWord)) {
+            // It appears we're still matching a channel handle that we already completed
+            return;
         }
-            }
+
+        // Clear the last completed word since we've started to match new text
+        this.lastCompletedWord = '';
+
+        const prefix = captured[3];
 
         this.startNewRequest(prefix);
 
@@ -119,5 +126,8 @@ export default class ChannelMentionProvider extends Provider {
             }
         );
     }
+
+    handleCompleteWord(term) {
+        this.lastCompletedWord = term;
     }
 }

webapp/components/suggestion/suggestion_box.jsx

@@ -153,6 +153,12 @@ export default class SuggestionBox extends React.Component {
         window.requestAnimationFrame(() => {
             Utils.setCaretPosition(textbox, prefix.length + term.length + 1);
         });
+
+        for (const provider of this.props.providers) {
+            if (provider.handleCompleteWord) {
+                provider.handleCompleteWord(term, matchedPretext);
+            }
+        }
     }
 
     handleKeyDown(e) {