diff --git a/ts/components/CallsList.tsx b/ts/components/CallsList.tsx index 1a6d35210..ca8aa8702 100644 --- a/ts/components/CallsList.tsx +++ b/ts/components/CallsList.tsx @@ -128,6 +128,13 @@ function rowHeight() { return CALL_LIST_ITEM_ROW_HEIGHT; } +function isSameOptions( + a: CallHistoryFilterOptions, + b: CallHistoryFilterOptions +) { + return a.query === b.query && a.status === b.status; +} + export function CallsList({ hasActiveCall, getCallHistoryGroupsCount, @@ -145,11 +152,13 @@ export function CallsList({ const [status, setStatus] = useState(CallHistoryFilterStatus.All); const [searchState, setSearchState] = useState(defaultInitState); + const prevOptionsRef = useRef(null); + useEffect(() => { const controller = new AbortController(); async function search() { - const options = { + const options: CallHistoryFilterOptions = { query: queryInput.toLowerCase().normalize().trim(), status, }; @@ -196,8 +205,20 @@ export function CallsList({ options, results, }); - infiniteLoaderRef.current?.resetLoadMoreRowsCache(true); - listRef.current?.scrollToPosition(0); + + const isUpdatingSameSearch = + prevOptionsRef.current != null && + isSameOptions(options, prevOptionsRef.current); + + // Commit only at the end in case the search was aborted. + prevOptionsRef.current = options; + + // Only reset the scroll position to the top when the user has changed the + // search parameters + if (!isUpdatingSameSearch) { + infiniteLoaderRef.current?.resetLoadMoreRowsCache(true); + listRef.current?.scrollToPosition(0); + } } drop(search()); diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 9a6f2db3b..8492d0b71 100644 --- a/ts/util/lint/exceptions.json +++ b/ts/util/lint/exceptions.json @@ -2957,5 +2957,13 @@ "reasonCategory": "usageTrusted", "updated": "2023-08-02T00:21:37.858Z", "reasonDetail": "" + }, + { + "rule": "React-useRef", + "path": "ts/components/CallsList.tsx", + "line": " const prevOptionsRef = useRef(null);", + "reasonCategory": "usageTrusted", + "updated": "2023-08-17T00:07:01.015Z", + "reasonDetail": "" } ]