Fix call list scroll jumping

This commit is contained in:
Jamie Kyle 2023-08-16 17:48:20 -07:00 committed by Jamie Kyle
parent 58aec8b1a3
commit 0f377de29e
2 changed files with 32 additions and 3 deletions

View file

@ -128,6 +128,13 @@ function rowHeight() {
return CALL_LIST_ITEM_ROW_HEIGHT; return CALL_LIST_ITEM_ROW_HEIGHT;
} }
function isSameOptions(
a: CallHistoryFilterOptions,
b: CallHistoryFilterOptions
) {
return a.query === b.query && a.status === b.status;
}
export function CallsList({ export function CallsList({
hasActiveCall, hasActiveCall,
getCallHistoryGroupsCount, getCallHistoryGroupsCount,
@ -145,11 +152,13 @@ export function CallsList({
const [status, setStatus] = useState(CallHistoryFilterStatus.All); const [status, setStatus] = useState(CallHistoryFilterStatus.All);
const [searchState, setSearchState] = useState(defaultInitState); const [searchState, setSearchState] = useState(defaultInitState);
const prevOptionsRef = useRef<CallHistoryFilterOptions | null>(null);
useEffect(() => { useEffect(() => {
const controller = new AbortController(); const controller = new AbortController();
async function search() { async function search() {
const options = { const options: CallHistoryFilterOptions = {
query: queryInput.toLowerCase().normalize().trim(), query: queryInput.toLowerCase().normalize().trim(),
status, status,
}; };
@ -196,8 +205,20 @@ export function CallsList({
options, options,
results, 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()); drop(search());

View file

@ -2957,5 +2957,13 @@
"reasonCategory": "usageTrusted", "reasonCategory": "usageTrusted",
"updated": "2023-08-02T00:21:37.858Z", "updated": "2023-08-02T00:21:37.858Z",
"reasonDetail": "<optional>" "reasonDetail": "<optional>"
},
{
"rule": "React-useRef",
"path": "ts/components/CallsList.tsx",
"line": " const prevOptionsRef = useRef<CallHistoryFilterOptions | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2023-08-17T00:07:01.015Z",
"reasonDetail": "<optional>"
} }
] ]