add safeTab(), fail test when page focus is lost

test/browser/column/colSpan.test.ts

@@ -1,7 +1,7 @@
 import { page, userEvent } from 'vitest/browser';
 
 import type { Column } from '../../../src';
-import { getCellsAtRowIndex, setup, validateCellPosition } from '../utils';
+import { getCellsAtRowIndex, safeTab, setup, validateCellPosition } from '../utils';
 
 const headerCells = page.getHeaderCell();
 
@@ -145,18 +145,18 @@ describe('colSpan', () => {
     await validateCellPosition(0, 8);
     await userEvent.keyboard('{arrowright}');
     await validateCellPosition(5, 8);
-    await userEvent.tab({ shift: true });
-    await userEvent.tab({ shift: true });
+    await safeTab(true);
+    await safeTab(true);
     await validateCellPosition(14, 7);
-    await userEvent.tab();
+    await safeTab();
     await validateCellPosition(0, 8);
     await userEvent.click(getCellsAtRowIndex(10).nth(11));
     await validateCellPosition(11, 11);
-    await userEvent.tab();
+    await safeTab();
     await validateCellPosition(12, 11);
-    await userEvent.tab();
+    await safeTab();
     await validateCellPosition(0, 12);
-    await userEvent.tab({ shift: true });
+    await safeTab(true);
     await validateCellPosition(12, 11);
 
     // bottom summary rows
@@ -198,7 +198,7 @@ describe('colSpan', () => {
 
     async function navigate(count: number, shift = false) {
       for (let i = 0; i < count; i++) {
-        await userEvent.tab({ shift });
+        await safeTab(shift);
       }
     }
   });

test/browser/column/grouping.test.ts

@@ -1,7 +1,7 @@
 import { page, userEvent } from 'vitest/browser';
 
 import type { ColumnOrColumnGroup } from '../../../src';
-import { setup, tabIntoGrid, testCount, validateCellPosition } from '../utils';
+import { safeTab, setup, tabIntoGrid, testCount, validateCellPosition } from '../utils';
 
 const grid = page.getGrid();
 const headerRows = grid.getHeaderRow();
@@ -323,21 +323,21 @@ test('keyboard navigation', async () => {
   await validateCellPosition(10, 3);
 
   // tab navigation
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(11, 3);
-  await userEvent.tab({ shift: true });
-  await userEvent.tab({ shift: true });
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
+  await safeTab(true);
+  await safeTab(true);
   await validateCellPosition(8, 3);
   await userEvent.keyboard('{arrowup}');
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await validateCellPosition(4, 0);
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(8, 0);
 
   await userEvent.keyboard('{home}{end}');
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(0, 4);
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await validateCellPosition(11, 3);
 });

test/browser/column/renderCell.test.tsx

@@ -4,7 +4,7 @@ import { page, userEvent } from 'vitest/browser';
 import { DataGrid } from '../../../src';
 import type { Column } from '../../../src';
 import defaultRenderHeaderCell from '../../../src/renderHeaderCell';
-import { getCellsAtRowIndex, setup } from '../utils';
+import { getCellsAtRowIndex, safeTab, setup } from '../utils';
 
 const cells = page.getCell();
 
@@ -144,15 +144,15 @@ test('Focus child if it sets tabIndex', async () => {
   await userEvent.click(page.getByText('Text'));
   await expect.element(button1).toHaveFocus();
   await expect.element(button1).toHaveAttribute('tabindex', '0');
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await expect.element(button1).not.toHaveFocus();
   await expect.element(button1).toHaveAttribute('tabindex', '-1');
   await expect.element(cell).toHaveAttribute('tabindex', '-1');
   await userEvent.click(button1);
   await expect.element(button1).toHaveFocus();
   await expect.element(button1).toHaveAttribute('tabindex', '0');
   await expect.element(cell).toHaveAttribute('tabindex', '-1');
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await userEvent.click(button2);
   await expect.element(button2).toHaveFocus();
   // It is user's responsibilty to set the tabIndex on button2

test/browser/column/renderEditCell.test.tsx

@@ -4,7 +4,7 @@ import { page, userEvent } from 'vitest/browser';
 
 import { DataGrid } from '../../../src';
 import type { Column, DataGridProps } from '../../../src';
-import { getCellsAtRowIndex, getRowWithCell, scrollGrid, testCount } from '../utils';
+import { getCellsAtRowIndex, getRowWithCell, safeTab, scrollGrid, testCount } from '../utils';
 
 const grid = page.getGrid();
 
@@ -22,7 +22,7 @@ describe('Editor', () => {
     await userEvent.dblClick(getCellsAtRowIndex(0).nth(0));
     await expect.element(editor).toHaveValue(1);
     await userEvent.keyboard('2');
-    await userEvent.tab();
+    await safeTab();
     await expect.element(editor).not.toBeInTheDocument();
     await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^12$/);
   });

test/browser/copyPaste.test.tsx

@@ -3,7 +3,7 @@ import { page, userEvent } from 'vitest/browser';
 
 import { DataGrid } from '../../src';
 import type { CellPasteArgs, Column } from '../../src';
-import { getCellsAtRowIndex } from './utils';
+import { getCellsAtRowIndex, safeTab } from './utils';
 
 interface Row {
   col: string;
@@ -116,7 +116,7 @@ test('should allow copying a readonly cell', async () => {
 
 test('should not allow copy/paste on header or summary cells', async () => {
   await setup();
-  await userEvent.tab();
+  await safeTab();
   await userEvent.copy();
   expect(onCellCopySpy).not.toHaveBeenCalled();
   await userEvent.paste();

test/browser/events.test.tsx

@@ -2,6 +2,7 @@ import { page, userEvent } from 'vitest/browser';
 
 import { DataGrid } from '../../src';
 import type { Column, DataGridProps } from '../../src';
+import { safeTab } from './utils';
 
 interface Row {
   col1: number;
@@ -162,7 +163,7 @@ describe('Events', () => {
     expect(onSelectedCellChange).toHaveBeenCalledTimes(4);
 
     // Selected by tab key
-    await userEvent.keyboard('{Tab}');
+    await safeTab();
     expect(onSelectedCellChange).toHaveBeenLastCalledWith({
       column: expect.objectContaining(columns[1]),
       row: rows[0],

test/browser/keyboardNavigation.test.tsx

@@ -4,6 +4,7 @@ import { DataGrid, SelectColumn } from '../../src';
 import type { Column } from '../../src';
 import {
   getRowWithCell,
+  safeTab,
   scrollGrid,
   setup,
   tabIntoGrid,
@@ -40,11 +41,11 @@ test('keyboard navigation', async () => {
   await validateCellPosition(0, 0);
 
   // tab to the next cell
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(1, 0);
 
   // tab back to the previous cell
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await validateCellPosition(0, 0);
 
   // arrow navigation
@@ -97,11 +98,11 @@ test('keyboard navigation', async () => {
 
   // tab at the end of a row selects the first cell on the next row
   await userEvent.keyboard('{end}');
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(0, 1);
 
   // shift tab should select the last cell of the previous row
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await validateCellPosition(6, 0);
 });
 
@@ -122,11 +123,11 @@ test('arrow and tab navigation', async () => {
   await validateCellPosition(6, 1);
 
   // pressing tab on the rightmost cell navigates to the leftmost cell on the next row
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(0, 2);
 
   // pressing shift+tab on the leftmost cell navigates to the rightmost cell on the previous row
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await validateCellPosition(6, 1);
 });
 
@@ -144,10 +145,10 @@ test('grid enter/exit', async () => {
   await validateCellPosition(0, 0);
 
   // shift+tab tabs out of the grid if we are at the first cell
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await expect.element(beforeButton).toHaveFocus();
 
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(0, 0);
 
   await userEvent.keyboard('{arrowdown}{arrowdown}');
@@ -156,19 +157,19 @@ test('grid enter/exit', async () => {
   // tab should select the last selected cell
   // click outside the grid
   await userEvent.click(beforeButton);
-  await userEvent.tab();
+  await safeTab();
   await userEvent.keyboard('{arrowdown}');
   await validateCellPosition(0, 3);
 
   // shift+tab should select the last selected cell
   await userEvent.click(afterButton);
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await validateCellPosition(0, 3);
   await expect.element(selectedCell.getByRole('checkbox')).toHaveFocus();
 
   // tab tabs out of the grid if we are at the last cell
   await userEvent.keyboard('{Control>}{end}{/Control}');
-  await userEvent.tab();
+  await safeTab();
   await expect.element(afterButton).toHaveFocus();
 });
 
@@ -184,7 +185,7 @@ test('navigation with focusable cell renderer', async () => {
   await expect.element(checkbox).toHaveFocus();
   await expect.element(checkbox).toHaveAttribute('tabIndex', '0');
 
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(1, 1);
   // cell should set tabIndex to 0 if it does not have focusable cell renderer
   await expect.element(selectedCell).toHaveAttribute('tabIndex', '0');
@@ -223,31 +224,31 @@ test('navigation when header and summary rows have focusable elements', async ()
   // should set focus on the header filter
   await expect.element(page.getByTestId('header-filter1')).toHaveFocus();
 
-  await userEvent.tab();
+  await safeTab();
   await expect.element(page.getByTestId('header-filter2')).toHaveFocus();
 
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(0, 1);
 
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await expect.element(page.getByTestId('header-filter2')).toHaveFocus();
 
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
   await expect.element(page.getByTestId('header-filter1')).toHaveFocus();
 
-  await userEvent.tab();
-  await userEvent.tab();
+  await safeTab();
+  await safeTab();
   await userEvent.keyboard('{Control>}{end}{/Control}{arrowup}{arrowup}');
   await validateCellPosition(1, 2);
 
-  await userEvent.tab();
+  await safeTab();
   await expect.element(page.getByTestId('summary-col2-1')).toHaveFocus();
 
-  await userEvent.tab();
+  await safeTab();
   await expect.element(page.getByTestId('summary-col3-1')).toHaveFocus();
 
-  await userEvent.tab({ shift: true });
-  await userEvent.tab({ shift: true });
+  await safeTab(true);
+  await safeTab(true);
   await validateCellPosition(1, 2);
   await expect.element(selectedCell).toHaveFocus();
 });
@@ -297,7 +298,7 @@ test('reset selected cell when column is removed', async () => {
 
   const { rerender } = await page.render(<Test columns={columns} />);
 
-  await userEvent.tab();
+  await safeTab();
   await userEvent.keyboard('{arrowdown}{arrowright}');
   await validateCellPosition(1, 1);
 
@@ -319,7 +320,7 @@ test('reset selected cell when row is removed', async () => {
 
   const { rerender } = await page.render(<Test rows={rows} />);
 
-  await userEvent.tab();
+  await safeTab();
   await userEvent.keyboard('{arrowdown}{arrowdown}{arrowright}');
   await validateCellPosition(1, 2);
 
@@ -332,7 +333,7 @@ test('should not change the left and right arrow behavior for right to left lang
   await setup<Row, Row>({ columns, rows, direction: 'rtl' }, true);
   await tabIntoGrid();
   await validateCellPosition(0, 0);
-  await userEvent.tab();
+  await safeTab();
   await validateCellPosition(1, 0);
   await userEvent.keyboard('{arrowright}');
   await validateCellPosition(0, 0);

test/browser/renderTextEditor.test.tsx

@@ -3,6 +3,7 @@ import { page, userEvent } from 'vitest/browser';
 
 import { DataGrid, renderTextEditor } from '../../src';
 import type { Column } from '../../src';
+import { safeTab } from './utils';
 
 interface Row {
   readonly name: string;
@@ -48,7 +49,7 @@ test('renderTextEditor', async () => {
   // blurring the input closes and commits the editor
   await userEvent.dblClick(cell);
   await userEvent.fill(input, 'Jim Milton');
-  await userEvent.tab();
+  await safeTab();
   await expect.element(input).not.toBeInTheDocument();
   await expect.element(cell).toHaveTextContent(/^Jim Milton$/);
 });