Fix call list scroll jumping
This commit is contained in:
parent
58aec8b1a3
commit
0f377de29e
2 changed files with 32 additions and 3 deletions
|
@ -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());
|
||||||
|
|
|
@ -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>"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue