MM-29965 Fix at_mention autocomplete selection bug (#4937)

* Adding E2E tests for at mention autocomplete

* Removing mentionComplete from at_mention autocomplete

- The component is already being hidden when there is no valid matchTerm or sections
- Setting mentionComplete to true after an autocomplete was selected prevented the autocomplete from rendering when @ is tapped a second time

* Updating E2E description

* Update detox/e2e/test/autocomplete/at_mention.e2e.js

Co-authored-by: Joseph Baylon <joseph.baylon@mattermost.com>

* complete at-mention selection when there are no more sections

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
Co-authored-by: Joseph Baylon <joseph.baylon@mattermost.com>

app/components/autocomplete/at_mention/at_mention.js

@@ -61,22 +61,9 @@ export default class AtMention extends PureComponent {
 
         // Not invoked, render nothing.
         if (matchTerm === null) {
-            this.props.onResultCountChange(0);
-            this.setState({
-                mentionComplete: false,
-                sections: [],
-            });
-            this.props.onResultCountChange(0);
-            return;
-        }
-
-        if (this.state.mentionComplete) {
-            // Mention has been completed. Hide autocomplete.
             this.setState({
                 sections: [],
             });
-
-            this.props.onResultCountChange(0);
             return;
         }
 
@@ -107,6 +94,12 @@ export default class AtMention extends PureComponent {
         }
     }
 
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.sections.length !== this.state.sections.length && this.state.sections.length === 0) {
+            this.props.onResultCountChange(0);
+        }
+    }
+
     buildSections = (props) => {
         const {isSearch, inChannel, outChannel, teamMembers, matchTerm, groups} = props;
         const sections = [];
@@ -203,7 +196,9 @@ export default class AtMention extends PureComponent {
         }
 
         onChangeText(completedDraft);
-        this.setState({mentionComplete: true});
+        this.setState({
+            sections: [],
+        });
     };
 
     renderSectionHeader = ({section}) => {
@@ -255,8 +250,8 @@ export default class AtMention extends PureComponent {
 
     render() {
         const {maxListHeight, theme, nestedScrollEnabled} = this.props;
-        const {mentionComplete, sections} = this.state;
-        if (sections.length === 0 || mentionComplete) {
+        const {sections} = this.state;
+        if (sections.length === 0) {
             // If we are not in an active state or the mention has been completed return null so nothing is rendered
             // other components are not blocked.
             return null;

detox/e2e/test/autocomplete/at_mention.e2e.js

@@ -168,4 +168,24 @@ describe('Autocomplete', () => {
         // * Expect at mention autocomplete not to contain associated user suggestion
         await expect(userAtMentionAutocomplete).not.toExist();
     });
+
+    it('MM-T3409_11 should be able to select at mention multiple times', async () => {
+        // # Type "@" to activate at mention autocomplete
+        await expect(element(by.id('autocomplete.at_mention.list'))).not.toExist();
+        await postInput.typeText('@');
+        await expect(element(by.id('autocomplete.at_mention.list'))).toExist();
+
+        // # Type username
+        await postInput.typeText(user.username);
+
+        // # Tap user
+        await element(by.id(`autocomplete.at_mention.item.${user.id}`)).tap();
+
+        // * expect mention autocomplete to dissappear
+        await expect(element(by.id('autocomplete.at_mention.list'))).not.toExist();
+
+        // # Type "@" again to re-activate mention autocomplete
+        await postInput.typeText('@');
+        await expect(element(by.id('autocomplete.at_mention.list'))).toExist();
+    });
 });