From 935b8902a860eea2e92b154e208fe55f0bcc5032 Mon Sep 17 00:00:00 2001
From: Julien Tant <785518+JulienTant@users.noreply.github.com>
Date: Tue, 13 May 2025 14:07:38 -0700
Subject: [PATCH] MM-64155: Fix searchbox clear button to reset search type
 (#31006)

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../search/search_box_clear_button.spec.ts    | 44 +++++++++++++++++++
 .../src/components/new_search/new_search.tsx  |  2 +-
 .../new_search/search_box_input.tsx           |  2 +-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 e2e-tests/playwright/specs/functional/channels/search/search_box_clear_button.spec.ts

diff --git a/e2e-tests/playwright/specs/functional/channels/search/search_box_clear_button.spec.ts b/e2e-tests/playwright/specs/functional/channels/search/search_box_clear_button.spec.ts
new file mode 100644
index 0000000000..013b97d2ae
--- /dev/null
+++ b/e2e-tests/playwright/specs/functional/channels/search/search_box_clear_button.spec.ts
@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@mattermost/playwright-lib';
+
+test('MM-64155 search box clear button should not leave type badge after closing the search box', async ({pw}) => {
+    // # Set up test with a user
+    const {user} = 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 something in the search box
+    const searchText = 'abcdef';
+    const {searchInput} = channelsPage.searchPopover;
+    await searchInput.pressSequentially(searchText);
+
+    // * Verify text was entered
+    await expect(searchInput).toHaveValue(searchText);
+
+    // # Click the clear button
+    await channelsPage.searchPopover.clearIfPossible();
+
+    // * Verify the input is cleared
+    await expect(searchInput).toHaveValue('');
+
+    // # Close the search box by clicking outside
+    await channelsPage.page.click('body', {position: {x: 0, y: 0}});
+
+    // * Verify the search box is closed
+    await expect(channelsPage.searchPopover.container).not.toBeVisible();
+
+    // * Verify there is no search type badge/chip in the search bar
+    // The search type badge is rendered when searchType is either 'messages' or 'files'
+    const searchTypeBadge = channelsPage.page.getByTestId('searchTypeBadge');
+    await expect(searchTypeBadge).not.toBeVisible();
+});
diff --git a/webapp/channels/src/components/new_search/new_search.tsx b/webapp/channels/src/components/new_search/new_search.tsx
index 9964aff21d..89b6329a38 100644
--- a/webapp/channels/src/components/new_search/new_search.tsx
+++ b/webapp/channels/src/components/new_search/new_search.tsx
@@ -266,7 +266,7 @@ const NewSearch = (): JSX.Element => {
         >
             <i className='icon icon-magnify'/>
             {(searchType === 'messages' || searchType === 'files') && (
-                <SearchTypeBadge>
+                <SearchTypeBadge data-testid='searchTypeBadge'>
                     {searchType === 'messages' && (
                         <FormattedMessage
                             id='search_bar.search_types.messages'
diff --git a/webapp/channels/src/components/new_search/search_box_input.tsx b/webapp/channels/src/components/new_search/search_box_input.tsx
index 92347e5b93..82d7c1e406 100644
--- a/webapp/channels/src/components/new_search/search_box_input.tsx
+++ b/webapp/channels/src/components/new_search/search_box_input.tsx
@@ -95,7 +95,7 @@ const SearchInput = forwardRef<HTMLInputElement, Props>(({searchTerms, searchTyp
     const clearSearch = useCallback(() => {
         setSearchTerms('');
         dispatch(updateSearchTerms(''));
-        dispatch(updateSearchType('messages'));
+        dispatch(updateSearchType(''));
         focus(0);
     }, [focus, setSearchTerms]);