From 6384f38ea3e5127bbd872915612116610085cdf5 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Fri, 13 Nov 2020 01:12:28 +0100
Subject: [PATCH] MM-29965 Fix at_mention autocomplete selection bug (#4937)
 (#4963)

* 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>
(cherry picked from commit e319a79e420058d9b8f34c1c2a8edfe72506273f)

Co-authored-by: Andre Vasconcelos <andre.onogoro@gmail.com>
---
 .../autocomplete/at_mention/at_mention.js     | 27 ++++++++-----------
 detox/e2e/test/autocomplete/at_mention.e2e.js | 20 ++++++++++++++
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js
index 8ea7d6489..d4f42851d 100644
--- a/app/components/autocomplete/at_mention/at_mention.js
+++ b/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;
diff --git a/detox/e2e/test/autocomplete/at_mention.e2e.js b/detox/e2e/test/autocomplete/at_mention.e2e.js
index 584261809..e0ddcf4da 100644
--- a/detox/e2e/test/autocomplete/at_mention.e2e.js
+++ b/detox/e2e/test/autocomplete/at_mention.e2e.js
@@ -167,4 +167,24 @@ describe('Autocomplete', () => {
         // * Expect at mention autocomplete not to contain associated user suggestion
         await expect(element(by.id(`autocomplete.at_mention.item.${user.id}`))).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();
+    });
 });