diff --git a/changelog/unreleased/issue-17261.toml b/changelog/unreleased/issue-17261.toml new file mode 100644 index 000000000000..4d799864908f --- /dev/null +++ b/changelog/unreleased/issue-17261.toml @@ -0,0 +1,4 @@ +type = "f" +message = "Fixing problem with persisting selected page size for some paginated lists." +issues = ["17261"] +pulls = ["17278"] diff --git a/graylog2-web-interface/src/components/common/PaginatedList.tsx b/graylog2-web-interface/src/components/common/PaginatedList.tsx index be8ddecff8c7..c94a86fa38d4 100644 --- a/graylog2-web-interface/src/components/common/PaginatedList.tsx +++ b/graylog2-web-interface/src/components/common/PaginatedList.tsx @@ -15,7 +15,7 @@ * . */ import * as React from 'react'; -import { useEffect, useMemo, useCallback } from 'react'; +import { useEffect, useMemo, useCallback, useState } from 'react'; import IfInteractive from 'views/components/dashboard/IfInteractive'; import usePaginationQueryParameter, { DEFAULT_PAGE_SIZES } from 'hooks/usePaginationQueryParameter'; @@ -110,16 +110,23 @@ const ListWithOwnState = ({ pageSize: propPageSize, ...props }: Required & { activePage: number, pageSize: number }) => { - const [{ page: currentPage, pageSize: currentPageSize }, setPagination] = React.useState({ - page: Math.max(activePage, INITIAL_PAGE), - pageSize: propPageSize, - }); + const [currentPage, setCurrentPage] = useState(Math.max(activePage, INITIAL_PAGE)); + const [currentPageSize, setCurrentPageSize] = useState(propPageSize); useEffect(() => { - if (activePage > 0 && activePage !== currentPage) { - setPagination((cur) => ({ ...cur, page: activePage })); + if (activePage > 0) { + setCurrentPage(activePage); } - }, [activePage, currentPage]); + }, [activePage]); + + useEffect(() => { + setCurrentPageSize(propPageSize); + }, [propPageSize]); + + const setPagination = useCallback(({ page, pageSize }) => { + setCurrentPageSize(pageSize); + setCurrentPage(page); + }, []); return (