diff --git a/.changeset/tidy-poems-buy.md b/.changeset/tidy-poems-buy.md new file mode 100644 index 00000000000..17bfb538035 --- /dev/null +++ b/.changeset/tidy-poems-buy.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': patch +--- + +Fixed arrow keys page navigation in `TablePaginator`. diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.tsx index 1a05ad084d2..12dfc98b4a2 100644 --- a/packages/itwinui-react/src/core/Table/TablePaginator.tsx +++ b/packages/itwinui-react/src/core/Table/TablePaginator.tsx @@ -20,6 +20,7 @@ import { } from '../../utils/index.js'; import type { CommonProps } from '../../utils/index.js'; import type { TablePaginatorRendererProps } from './Table.js'; +import { styles } from '../../styles.js'; const defaultLocalization = { pageSizeLabel: (size: number) => `${size} per page`, @@ -159,7 +160,7 @@ export const TablePaginator = (props: TablePaginatorProps) => { if (isMounted.current && needFocus.current) { const buttonToFocus = Array.from( pageListRef.current?.querySelectorAll( - '.iui-table-paginator-page-button', + `.${styles['iui-table-paginator-page-button']}`, ) ?? [], ).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString()); (buttonToFocus as HTMLButtonElement | undefined)?.focus();