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
This commit is contained in:
Carlos Garcia 2026-03-17 10:52:17 +01:00 committed by GitHub
parent 6000e69886
commit 5365109ca8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 5 deletions

View file

@ -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');

View file

@ -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(() => {