diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue index 2885aab673..08d061c85f 100644 --- a/packages/nc-gui/components/smartsheet/grid/Table.vue +++ b/packages/nc-gui/components/smartsheet/grid/Table.vue @@ -208,7 +208,7 @@ const { onDrag, onDragStart, onDragEnd, draggedCol, dragColPlaceholderDomRef, to gridWrapper, }) -const { onLeft, onRight, onUp, onDown, changePageWithLoading } = usePaginationShortcuts({ +const { onLeft, onRight, onUp, onDown } = usePaginationShortcuts({ paginationDataRef, changePage: changePage as any, }) @@ -977,8 +977,8 @@ function scrollToCell(row?: number | null, col?: number | null) { async function resetAndChangePage(row: number, col: number, pageChange?: number) { clearSelectedRange() - if (pageChange !== undefined) { - await changePage?.(paginationDataRef.value?.page! + pageChange) + if (pageChange !== undefined && paginationDataRef.value?.page) { + await changePage?.(paginationDataRef.value.page + pageChange) await nextTick() makeActive(row, col) } else { diff --git a/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts b/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts index 5a6cbd1b18..9eff4121c4 100644 --- a/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts +++ b/packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts @@ -75,7 +75,6 @@ const usePaginationShortcuts = ({ onRight, onUp, onDown, - changePageWithLoading, } } diff --git a/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts b/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts index 73795f3c90..7a3a72e012 100644 --- a/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts +++ b/tests/playwright/tests/db/features/keyboardShortcuts.spec.ts @@ -137,6 +137,61 @@ test.describe('Verify shortcuts', () => { await page.keyboard.press((await grid.isMacOs()) ? 'Meta+Enter' : 'Control+Enter'); await page.reload(); await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' }); + + // Tab: + // If current page is not last page and and current cell is last column of last row and user press `Tab` then current page will be incremented by 1 + await grid.cell.click({ index: 24, columnHeader: 'Cities' }); + await page.keyboard.press('Tab'); + await grid.verifyActivePage({ pageNumber: '2' }); + await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' }); + + // If current page is last page and and current cell is last column of last row and user press `Tab` then new empty row will be added + await grid.clickPagination({ type: 'last-page' }); + await grid.cell.click({ index: 8, columnHeader: 'Cities' }); + await page.keyboard.press('Tab'); + await grid.verifyRowCount({ count: 10 }); + await grid.cell.verifyCellActiveSelected({ index: 9, columnHeader: 'Country' }); + + // If current page is not first page and and current cell is first column of first row and user press `Shift+Tab` then current page will be decremented by 1 + await grid.cell.click({ index: 0, columnHeader: 'Country' }); + await page.keyboard.press('Shift+Tab'); + await grid.verifyActivePage({ pageNumber: '4' }); + await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Cities' }); + + // If current page is first page and and current cell is first column of first row and user press `Shift+Tab` then current page will not change + await grid.clickPagination({ type: 'first-page' }); + await grid.cell.click({ index: 0, columnHeader: 'Country' }); + await page.keyboard.press('Shift+Tab'); + await grid.verifyActivePage({ pageNumber: '1' }); + await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' }); + + // ArrowDown: + // If current page is not last page and and current cell is in last row and user press `ArrowDown` then current page will be incremented by 1 + await grid.cell.click({ index: 24, columnHeader: 'Cities' }); + await page.keyboard.press('ArrowDown'); + await grid.verifyActivePage({ pageNumber: '2' }); + await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Cities' }); + + // If current page is last page and and current cell is in last row and user press `ArrowDown` then new empty row will be added + await grid.clickPagination({ type: 'last-page' }); + await grid.cell.click({ index: 8, columnHeader: 'Cities' }); + await page.keyboard.press('ArrowDown'); + await grid.verifyRowCount({ count: 10 }); + await grid.cell.verifyCellActiveSelected({ index: 9, columnHeader: 'Country' }); + + // ArrowUp: + // If current page is not first page and and current cell is in first row and user press `ArrwoUp` then current page will be decremented by 1 + await grid.cell.click({ index: 0, columnHeader: 'Cities' }); + await page.keyboard.press('ArrowUp'); + await grid.verifyActivePage({ pageNumber: '4' }); + await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Cities' }); + + // If current page is first page and and current cell is in first row and user press `ArrwoUp` then current page will not change + await grid.clickPagination({ type: 'first-page' }); + await grid.cell.click({ index: 0, columnHeader: 'Cities' }); + await page.keyboard.press('ArrowUp'); + await grid.verifyActivePage({ pageNumber: '1' }); + await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Cities' }); }); });