reset scroll position on list page change

This commit is contained in:
jeffvli
2025-10-23 00:50:24 -07:00
parent dae04e2aeb
commit 34dc917271
6 changed files with 37 additions and 2 deletions
@@ -179,6 +179,7 @@ export interface GridItemProps {
}
export interface ItemGridListProps {
currentPage?: number;
data: unknown[];
enableExpansion?: boolean;
enableSelection?: boolean;
@@ -199,6 +200,7 @@ export interface ItemGridListProps {
}
export const ItemGridList = ({
currentPage,
data,
enableExpansion = true,
enableSelection = true,
@@ -331,8 +333,23 @@ export const ItemGridList = ({
],
);
// Scroll to top when currentPage changes
useEffect(() => {
if (currentPage !== undefined && tableMeta?.itemHeight) {
scrollToGridOffset(0);
}
}, [currentPage, scrollToGridOffset, tableMeta?.itemHeight]);
useEffect(() => {
if (!initialTop || isInitialScrollPositionSet.current || !tableMeta?.itemHeight) return;
// Only set initial scroll position if we haven't done it yet AND we're not on a page change
// This prevents the initial scroll position from being restored on every page change
if (currentPage !== undefined && currentPage > 0) {
isInitialScrollPositionSet.current = true;
return;
}
isInitialScrollPositionSet.current = true;
if (initialTop.type === 'offset') {
@@ -343,7 +360,7 @@ export const ItemGridList = ({
index: initialTop.to,
});
}
}, [initialTop, itemGridRef, scrollToGridOffset, tableMeta?.itemHeight]);
}, [initialTop, itemGridRef, scrollToGridOffset, tableMeta?.itemHeight, currentPage]);
const imperativeHandle: ItemListHandle = useMemo(() => {
return {
@@ -403,6 +403,7 @@ interface ItemTableListProps {
CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
cellPadding?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
columns: ItemTableListColumnConfig[];
currentPage?: number;
data: unknown[];
enableAlternateRowColors?: boolean;
enableExpansion?: boolean;
@@ -435,6 +436,7 @@ export const ItemTableList = ({
CellComponent,
cellPadding = 'sm',
columns,
currentPage,
data,
enableAlternateRowColors = false,
enableExpansion = true,
@@ -1079,6 +1081,13 @@ export const ItemTableList = ({
}
}, [initialTop, scrollToTableIndex, scrollToTableOffset]);
// Scroll to top when currentPage changes
useEffect(() => {
if (currentPage !== undefined) {
scrollToTableOffset(0);
}
}, [currentPage, scrollToTableOffset]);
const imperativeHandle: ItemListHandle = useMemo(() => {
return {
clearExpanded: () => {
@@ -64,6 +64,7 @@ export const AlbumListPaginatedGrid = forwardRef<any, AlbumListPaginatedGridProp
totalItemCount={totalItemCount}
>
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
initialTop={{
@@ -73,6 +73,7 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
<ItemTableList
CellComponent={ItemTableListColumn}
columns={columns}
currentPage={currentPage}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
@@ -52,7 +52,13 @@ export const SongListPaginatedGrid = forwardRef<any, SongListPaginatedGridProps>
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemGridList data={data || []} gap={gap} itemType={LibraryItem.SONG} ref={ref} />
<ItemGridList
currentPage={currentPage}
data={data || []}
gap={gap}
itemType={LibraryItem.SONG}
ref={ref}
/>
</ItemListWithPagination>
);
},
@@ -68,6 +68,7 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
<ItemTableList
CellComponent={ItemTableListColumn}
columns={columns}
currentPage={currentPage}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}