[MM-61969] Fix regression where search suggestion would break when using uppercase letters (#29400)

e2e-tests/playwright/support/ui/components/global_header.ts

@@ -9,6 +9,7 @@ export default class GlobalHeader {
     readonly productSwitchMenu;
     readonly recentMentionsButton;
     readonly settingsButton;
+    readonly searchBox;
 
     constructor(container: Locator) {
         this.container = container;
@@ -16,6 +17,7 @@ export default class GlobalHeader {
         this.productSwitchMenu = container.getByRole('button', {name: 'Product switch menu'});
         this.recentMentionsButton = container.getByRole('button', {name: 'Recent mentions'});
         this.settingsButton = container.getByRole('button', {name: 'Settings'});
+        this.searchBox = container.locator('#searchFormContainer');
     }
 
     async toBeVisible(name: string) {
@@ -36,6 +38,11 @@ export default class GlobalHeader {
         await expect(this.recentMentionsButton).toBeVisible();
         await this.recentMentionsButton.click();
     }
+
+    async openSearch() {
+        await expect(this.searchBox).toBeVisible();
+        await this.searchBox.click();
+    }
 }
 
 export {GlobalHeader};

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

@@ -0,0 +1,32 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@e2e-support/test_fixture';
+
+test('Search box suggestion must be case insensitive', async ({pw, pages}) => {
+    const {user} = await pw.initSetup();
+
+    // # Log in a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit a default channel page
+    const channelsPage = new pages.ChannelsPage(page);
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    // # Open the search UI
+    await channelsPage.globalHeader.openSearch();
+
+    const searchInput = await page.getByPlaceholder('Search messages');
+
+    // * it's working when using lowercase
+    await searchInput.fill('In:off');
+    await searchInput.press('Enter');
+    await expect(searchInput).toHaveValue('In:off-topic ');
+
+    // * it's working when using uppercase
+    await searchInput.clear();
+    await searchInput.fill('In:Off');
+    await searchInput.press('Enter');
+    await expect(searchInput).toHaveValue('In:off-topic ');
+});

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

@@ -144,7 +144,7 @@ const SearchBox = forwardRef(
                 const caretPosition = getCaretPosition();
                 const extraSpace = caretPosition === searchTerms.length ? ' ' : '';
                 setSearchTerms(
-                    searchTerms.slice(0, caretPosition).replace(new RegExp(escapedMatchedPretext + '$'), '') +
+                    searchTerms.slice(0, caretPosition).replace(new RegExp(escapedMatchedPretext + '$', 'i'), '') +
                     value +
                     extraSpace +
                     searchTerms.slice(caretPosition),