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:
parent
6000e69886
commit
5365109ca8
2 changed files with 13 additions and 5 deletions
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue