Merge branch 'r/table-paginator-arrow-keys-bug' into r/overflow-conta…

…iner-without-new-algorithm
iTwin · Oct 14, 2024 · 27fbb21 · 27fbb21
2 parents fb18559 + 4fed729
commit 27fbb21
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/tidy-poems-buy.md 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
@@ -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();