From 30ba6f573d6672a93a27b3090ad77babf770766e Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Tue, 8 Jul 2025 14:45:28 -0400
Subject: [PATCH] MM-64681 Fix in: filter in mobile search box (#32120)

---
 .../channels/search/mobile_search_spec.js     | 34 +++++++++++++++++++
 .../channels/src/components/search/index.tsx  |  4 +--
 .../suggestion/search_suggestion_list.tsx     |  5 ++-
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/e2e-tests/cypress/tests/integration/channels/search/mobile_search_spec.js b/e2e-tests/cypress/tests/integration/channels/search/mobile_search_spec.js
index a236bb452d..939d013fad 100644
--- a/e2e-tests/cypress/tests/integration/channels/search/mobile_search_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/search/mobile_search_spec.js
@@ -79,4 +79,38 @@ describe('Mobile Search', () => {
         // * Verify that the loading spinner is eventually gone
         verifyLoadingSpinnerIsGone();
     });
+
+    it('MM-64681 should be able to autocomplete users and channels in mobile view', () => {
+        // * Open the search box
+        cy.get('button.navbar-search').click();
+
+        // * Verify that the search box is open
+        cy.get('#sbrSearchBox').should('be.visible');
+
+        // # Trigger the user autocomplete to appear
+        cy.get('#sbrSearchBox').type('from:');
+
+        // * Verify that the autocomplete is visible and contains some result
+        cy.get('[role="listbox"]').get('[role="option"]').should('be.visible').and('contain.text', 'sysadmin');
+
+        // # Select a user
+        cy.get('[role="option"]').contains('sysadmin').click();
+
+        // * Verify that the autocomplete closed and the user's name was added to the result
+        cy.get('[role="listbox"]').should('not.exist');
+        cy.get('#sbrSearchBox').should('have.value', 'from:sysadmin ');
+
+        // # Trigger the channel autocomplete to appear
+        cy.get('#sbrSearchBox').type('in:');
+
+        // * Verify that the autocomplete is visible and contains some results
+        cy.get('[role="listbox"]').get('[role="option"]').should('be.visible');
+
+        // # Select a channel
+        cy.get('[role="option"]').contains('Off-Topic').click();
+
+        // * Verify that the autocomplete closed and the Off-Topic channel was selected was added to the result
+        cy.get('[role="listbox"]').should('not.exist');
+        cy.get('#sbrSearchBox').should('have.value', 'from:sysadmin in:off-topic ');
+    });
 });
diff --git a/webapp/channels/src/components/search/index.tsx b/webapp/channels/src/components/search/index.tsx
index 7c6942e625..dd4d159636 100644
--- a/webapp/channels/src/components/search/index.tsx
+++ b/webapp/channels/src/components/search/index.tsx
@@ -67,8 +67,8 @@ function mapStateToProps(state: GlobalState) {
 }
 
 function mapDispatchToProps(dispatch: Dispatch) {
-    const autocompleteChannels = (term: string, teamId: string, success?: (channels: Channel[]) => void, error?: (err: ServerError) => void): void => {
-        autocompleteChannelsForSearch(term, success, error);
+    const autocompleteChannels = (term: string, teamId: string, success?: (channels: Channel[]) => void, error?: (err: ServerError) => void) => {
+        return autocompleteChannelsForSearch(term, success, error);
     };
 
     return {
diff --git a/webapp/channels/src/components/suggestion/search_suggestion_list.tsx b/webapp/channels/src/components/suggestion/search_suggestion_list.tsx
index f5cc3ecd22..1d2974952c 100644
--- a/webapp/channels/src/components/suggestion/search_suggestion_list.tsx
+++ b/webapp/channels/src/components/suggestion/search_suggestion_list.tsx
@@ -114,7 +114,10 @@ export default class SearchSuggestionList extends SuggestionList {
                 className='search-help-popover autocomplete visible'
                 placement='bottom'
             >
-                <div ref={this.itemsContainerRef}>
+                <div
+                    ref={this.itemsContainerRef}
+                    role='listbox'
+                >
                     {items}
                 </div>
             </Popover>