[MM-63597] Fix From: autocompletion (#30673)

e2e-tests/playwright/specs/functional/channels/search/search_box_suggestions.spec.ts

@@ -57,3 +57,33 @@ test('Search box suggestion must be case insensitive', async ({pw}) => {
     // * The search box should contain the selected suggestion
     await expect(channelsPage.globalHeader.searchBox.getByText(searchOutput, {exact: true})).toBeVisible();
 });
+
+test('remove extra whitespace when selecting a user', async ({pw}) => {
+    // # Set up test with two users
+    const {user, adminUser: admin} = await pw.initSetup();
+
+    // # Log in as the test user
+    const {channelsPage} = await pw.testBrowser.login(user);
+
+    // # Visit a default channel page
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    // # Open the search UI
+    await channelsPage.globalHeader.openSearch();
+
+    // # Type "from:" followed by multiple spaces
+    const {searchInput} = channelsPage.searchPopover;
+    await searchInput.pressSequentially(`from:    ${admin.username}`);
+
+    // * The suggestion should be visible
+    await expect(channelsPage.searchPopover.selectedSuggestion).toBeVisible();
+    await expect(channelsPage.searchPopover.selectedSuggestion).toHaveText(`@` + admin.username);
+
+    // # Press enter to validate the selection
+    await searchInput.press('Enter');
+
+    // * Verify the search box shows "from:username" without extra spaces
+    const expectedText = `from:${admin.username} `;
+    await expect(searchInput).toHaveValue(expectedText);
+});

webapp/channels/src/components/new_search/search_box.tsx

@@ -170,7 +170,7 @@ const SearchBox = forwardRef(
                 }
 
                 setSearchTerms(
-                    searchTerms.slice(0, caretPosition).replace(new RegExp(escapedMatchedPretext + '$', 'i'), '') +
+                    searchTerms.slice(0, caretPosition).replace(new RegExp(escapedMatchedPretext + '$', 'i'), '').trimEnd() +
                     val +
                     extraSpace +
                     searchTerms.slice(caretPosition),
@@ -228,7 +228,8 @@ const SearchBox = forwardRef(
         const changeSearchTeam = (selectedTeam: string) => {
             const newTerms = searchTerms.
                 replace(/\bin:[^\s]*/gi, '').replace(/\s{2,}/g, ' ').
-                replace(/\bfrom:[^\s]*/gi, '').replace(/\s{2,}/g, ' ');
+                replace(/\bfrom:[^\s]*/gi, '').replace(/\s{2,}/g, ' ').
+                trim();
 
             if (newTerms !== searchTerms) {
                 clearTimeout(filterResetTimeout.current);

webapp/channels/src/components/suggestion/search_user_provider.tsx

@@ -71,6 +71,11 @@ export default class SearchUserProvider extends Provider {
     }
 
     handlePretextChanged(pretext: string, resultsCallback: ResultsCallback<UserProfile>, teamId: string) {
+        // no autocomplete on All teams
+        if (teamId === '') {
+            return false;
+        }
+
         const captured = (/\bfrom:\s*(\S*)$/i).exec(pretext.toLowerCase());
 
         this.doAutocomplete(captured, teamId, resultsCallback);