From 5365109ca8d365029fb415556520400d47b491d3 Mon Sep 17 00:00:00 2001
From: Carlos Garcia <carlos.garcia@mattermost.com>
Date: Tue, 17 Mar 2026 10:52:17 +0100
Subject: [PATCH] Fix search results layout overlap on hashtag search (#9582)

* Fix search results layout overlap on hashtag navigation

Defer handleSearch via requestAnimationFrame so React commits
state updates before the search starts, ensuring lockValue is
set before showResults becomes true.

* wait for search to be performed when testing hashtag search

* return cancel effect callback
---
 app/screens/home/search/search.test.tsx |  1 +
 app/screens/home/search/search.tsx      | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/screens/home/search/search.test.tsx b/app/screens/home/search/search.test.tsx
index f0f493ad3..f88a3adf4 100644
--- a/app/screens/home/search/search.test.tsx
+++ b/app/screens/home/search/search.test.tsx
@@ -223,6 +223,7 @@ describe('SearchScreen', () => {
         await waitFor(() => {
             const searchInput = getByTestId('navigation.header.search_bar.search.input');
             expect(searchInput.props.value).toBe('#hashtag');
+            expect(searchPosts).toHaveBeenCalled();
         });
 
         const searchInput = getByTestId('navigation.header.search_bar.search.input');
diff --git a/app/screens/home/search/search.tsx b/app/screens/home/search/search.tsx
index bf89b9a34..ddb707323 100644
--- a/app/screens/home/search/search.tsx
+++ b/app/screens/home/search/search.tsx
@@ -371,12 +371,19 @@ const SearchScreen = ({teamId, teams, crossTeamSearchEnabled}: Props) => {
     }, [unlock, onSnapWithTimeout]);
 
     useEffect(() => {
-        if (searchTerm && searchTerm !== processedSearchTermRef.current) {
-            processedSearchTermRef.current = searchTerm;
-            clearInputs();
-            setSearchValue(searchTerm);
-            handleSearch(searchTeamId, searchTerm);
+        if (!searchTerm || searchTerm === processedSearchTermRef.current) {
+            return undefined;
         }
+
+        processedSearchTermRef.current = searchTerm;
+        clearInputs();
+        setSearchValue(searchTerm);
+
+        const raf = requestAnimationFrame(() => {
+            handleSearch(searchTeamId, searchTerm);
+        });
+
+        return () => cancelAnimationFrame(raf);
     }, [handleSearch, clearInputs, searchTeamId, searchTerm]);
 
     useDidUpdate(() => {