Run tests in FF

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Build website
         run: node --run build:website
       - name: Install Playwright Browsers
-        run: npx playwright install chromium
+        run: npx playwright install chromium firefox
       - name: Test
         run: node --run test
         timeout-minutes: 4

package.json

@@ -69,7 +69,7 @@
     "@typescript-eslint/parser": "^8.29.0",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser": "^3.1.2",
-    "@vitest/coverage-v8": "^3.1.2",
+    "@vitest/coverage-istanbul": "^3.1.2",
     "@vitest/eslint-plugin": "^1.1.43",
     "@wyw-in-js/rollup": "^0.6.0",
     "@wyw-in-js/vite": "^0.6.0",

src/DataGrid.tsx

@@ -484,6 +484,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const selectedCellIsWithinViewportBounds = isCellWithinViewportBounds(selectedPosition);
   const scrollHeight =
     headerRowHeight + totalRowHeight + summaryRowsHeight + horizontalScrollbarHeight;
+  const shouldFocusGrid = !selectedCellIsWithinSelectionBounds;
 
   /**
    * The identity of the wrapper function is stable so it won't break memoization
@@ -499,9 +500,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const selectRowLatest = useLatestFunc(selectRow);
   const handleFormatterRowChangeLatest = useLatestFunc(updateRow);
   const selectCellLatest = useLatestFunc(selectCell);
-  const selectHeaderCellLatest = useLatestFunc(({ idx, rowIdx }: Position) => {
-    selectCell({ rowIdx: minRowIdx + rowIdx - 1, idx });
-  });
+  const selectHeaderCellLatest = useLatestFunc(selectHeaderCell);
 
   /**
    * callbacks
@@ -661,6 +660,13 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     }
   }
 
+  function handleFocus(event: React.FocusEvent<HTMLDivElement>) {
+    // select the first header cell if the focus event is triggered by the grid
+    if (event.target === event.currentTarget) {
+      selectHeaderCell({ idx: 0, rowIdx: headerRowsCount });
+    }
+  }
+
   function handleScroll(event: React.UIEvent<HTMLDivElement>) {
     const { scrollTop, scrollLeft } = event.currentTarget;
     flushSync(() => {
@@ -867,6 +873,10 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     }
   }
 
+  function selectHeaderCell({ idx, rowIdx }: Position) {
+    selectCell({ rowIdx: minRowIdx + rowIdx - 1, idx });
+  }
+
   function getNextPosition(key: string, ctrlKey: boolean, shiftKey: boolean): Position {
     const { idx, rowIdx } = selectedPosition;
     const isRowSelected = selectedCellIsWithinSelectionBounds && idx === -1;
@@ -1185,6 +1195,9 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       aria-multiselectable={isSelectable ? true : undefined}
       aria-colcount={columns.length}
       aria-rowcount={ariaRowCount}
+      // Scrollable containers without tabIndex are keyboard focusable in Chrome only if there is no focusable element inside
+      // whereas they are are always focusable in Firefox. We need to set tabIndex to have a consistent behavior across browsers.
+      tabIndex={shouldFocusGrid ? 0 : -1}
       className={clsx(
         rootClassname,
         {
@@ -1216,6 +1229,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       }
       dir={direction}
       ref={gridRef}
+      onFocus={shouldFocusGrid ? handleFocus : undefined}
       onScroll={handleScroll}
       onKeyDown={handleKeyDown}
       onCopy={handleCellCopy}
@@ -1252,7 +1266,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
                 selectedPosition.rowIdx === mainHeaderRowIdx ? selectedPosition.idx : undefined
               }
               selectCell={selectHeaderCellLatest}
-              shouldFocusGrid={!selectedCellIsWithinSelectionBounds}
               direction={direction}
             />
           </HeaderRowSelectionContext>

src/HeaderCell.tsx

@@ -61,7 +61,6 @@ type SharedHeaderRowProps<R, SR> = Pick<
   | 'selectCell'
   | 'onColumnResize'
   | 'onColumnResizeEnd'
-  | 'shouldFocusGrid'
   | 'direction'
   | 'onColumnsReorder'
 >;
@@ -85,7 +84,6 @@ export default function HeaderCell<R, SR>({
   sortColumns,
   onSortColumnsChange,
   selectCell,
-  shouldFocusGrid,
   direction,
   dragDropKey
 }: HeaderCellProps<R, SR>) {
@@ -155,14 +153,6 @@ export default function HeaderCell<R, SR>({
     }
   }
 
-  function handleFocus(event: React.FocusEvent<HTMLDivElement>) {
-    onFocus?.(event);
-    if (shouldFocusGrid) {
-      // Select the first header cell if there is no selected cell
-      selectCell({ idx: 0, rowIdx });
-    }
-  }
-
   function onKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
     const { key } = event;
     if (sortable && (key === ' ' || key === 'Enter')) {
@@ -254,14 +244,13 @@ export default function HeaderCell<R, SR>({
       aria-rowspan={rowSpan}
       aria-selected={isCellSelected}
       aria-sort={ariaSort}
-      // set the tabIndex to 0 when there is no selected cell so grid can receive focus
-      tabIndex={shouldFocusGrid ? 0 : tabIndex}
+      tabIndex={tabIndex}
       className={className}
       style={{
         ...getHeaderCellStyle(column, rowIdx, rowSpan),
         ...getCellStyle(column, colSpan)
       }}
-      onFocus={handleFocus}
+      onFocus={onFocus}
       onClick={onClick}
       onKeyDown={onKeyDown}
       {...draggableProps}

src/HeaderRow.tsx

@@ -22,7 +22,6 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
   selectCell: (position: Position) => void;
   lastFrozenColumnIndex: number;
   selectedCellIdx: number | undefined;
-  shouldFocusGrid: boolean;
   direction: Direction;
   headerRowClass: Maybe<string>;
 }
@@ -59,7 +58,6 @@ function HeaderRow<R, SR, K extends React.Key>({
   lastFrozenColumnIndex,
   selectedCellIdx,
   selectCell,
-  shouldFocusGrid,
   direction
 }: HeaderRowProps<R, SR, K>) {
   const dragDropKey = useId();
@@ -85,7 +83,6 @@ function HeaderRow<R, SR, K extends React.Key>({
         onSortColumnsChange={onSortColumnsChange}
         sortColumns={sortColumns}
         selectCell={selectCell}
-        shouldFocusGrid={shouldFocusGrid && index === 0}
         direction={direction}
         dragDropKey={dragDropKey}
       />

test/browser/column/renderEditCell.test.tsx

@@ -22,7 +22,7 @@ describe('Editor', () => {
     await userEvent.keyboard('2');
     await userEvent.tab();
     await expect.element(editor).not.toBeInTheDocument();
-    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12$/);
+    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(12);
   });
 
   it('should open and commit changes on enter', async () => {
@@ -42,7 +42,7 @@ describe('Editor', () => {
     page.render(<EditorTest />);
     await userEvent.click(getCellsAtRowIndex(0)[0]);
     await userEvent.keyboard('123{enter}');
-    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1123$/);
+    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent('123');
   });
 
   it('should close editor and discard changes on escape', async () => {
@@ -99,7 +99,8 @@ describe('Editor', () => {
     const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
     await expect.element(editor).not.toBeInTheDocument();
     expect(getGrid().element().scrollTop).toBe(2000);
-    await userEvent.keyboard('123');
+    // `1{backspace}` is needed to fix tests in FF
+    await userEvent.keyboard('1{backspace}123');
     expect(getCellsAtRowIndex(0)).toHaveLength(2);
     await expect.element(editor).toHaveValue(123);
     expect(getGrid().element().scrollTop).toBe(0);
@@ -193,9 +194,9 @@ describe('Editor', () => {
           }}
         />
       );
-      await userEvent.click(getCellsAtRowIndex(0)[1]);
+      await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
       await userEvent.keyboard('yz{enter}');
-      expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/);
+      expect(getCellsAtRowIndex(0)[1]).toHaveTextContent('yz');
       await userEvent.keyboard('x');
       await expect
         .element(page.getByRole('textbox', { name: 'col2-editor' }))

test/browser/dragFill.test.tsx

@@ -70,7 +70,9 @@ test('should update single row using mouse', async () => {
   await commands.dragFill('a1', 'a2');
   await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
   await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3');
-  await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1961462
+  const rowIdx = navigator.userAgent.includes('Firefox') ? 1 : 0;
+  await expect.element(getCellsAtRowIndex(rowIdx)[0]).toHaveFocus();
 });
 
 test('should update multiple rows using mouse', async () => {

vite.config.ts

@@ -73,18 +73,15 @@ export default defineConfig(({ command }) => ({
   server: {
     open: true
   },
-  optimizeDeps: {
-    include: ['@vitest/coverage-v8/browser']
-  },
   test: {
     globals: true,
     coverage: {
-      provider: 'v8',
+      provider: 'istanbul',
       enabled: isCI,
       include: ['src/**/*.{ts,tsx}'],
       reporter: ['json']
     },
-    testTimeout: isCI ? 10000 : 5000,
+    testTimeout: 20_000,
     restoreMocks: true,
     sequence: {
       shuffle: true
@@ -102,6 +99,10 @@ export default defineConfig(({ command }) => ({
               {
                 browser: 'chromium',
                 context: { viewport }
+              },
+              {
+                browser: 'firefox',
+                context: { viewport }
               }
             ],
             commands: { resizeColumn, dragFill },