Do not select group row when checkbox is toggled using keyboard

src/Columns.tsx

@@ -1,4 +1,5 @@
 import { useRowSelection } from './hooks/useRowSelection';
+import { stopPropagation } from './utils';
 import type { Column, RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps } from './types';
 import { SelectCellFormatter } from './cellRenderers';
 
@@ -42,6 +43,7 @@ function SelectGroupFormatter(props: RenderGroupCellProps<unknown>) {
       aria-label="Select Group"
       tabIndex={props.tabIndex}
       value={isRowSelected}
+      onClick={stopPropagation}
       onChange={(checked) => {
         onRowSelectionChange({ type: 'ROW', row: props.row, checked, isShiftClick: false });
       }}

src/cellRenderers/SelectCellFormatter.tsx

@@ -3,7 +3,7 @@ import { useDefaultRenderers } from '../DataGridDefaultRenderersProvider';
 
 type SharedInputProps = Pick<
   RenderCheckboxProps,
-  'disabled' | 'tabIndex' | 'aria-label' | 'aria-labelledby'
+  'aria-label' | 'aria-labelledby' | 'disabled' | 'tabIndex' | 'onClick'
 >;
 
 interface SelectCellFormatterProps extends SharedInputProps {
@@ -15,6 +15,7 @@ export function SelectCellFormatter({
   value,
   tabIndex,
   disabled,
+  onClick,
   onChange,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy
@@ -27,6 +28,7 @@ export function SelectCellFormatter({
     tabIndex,
     disabled,
     checked: value,
+    onClick,
     onChange
   });
 }

src/types.ts

@@ -262,7 +262,7 @@ export interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPr
 export interface RenderCheckboxProps
   extends Pick<
     React.InputHTMLAttributes<HTMLInputElement>,
-    'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'
+    'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled' | 'onClick'
   > {
   onChange: (checked: boolean, shift: boolean) => void;
 }

test/grouping.test.tsx

@@ -277,12 +277,15 @@ test('should select rows in a group', async () => {
   await userEvent.click(checkbox);
   selectedRows = screen.getAllByRole('row', { selected: true });
   expect(selectedRows).toHaveLength(4);
+  // clicking on the checkbox should select the row
+  expect(getRows()[4]).toHaveClass(rowSelectedClassname);
 
   // unselect child group
-  await userEvent.click(checkbox);
+  await userEvent.keyboard('{arrowright}" "');
   selectedRows = screen.getAllByRole('row', { selected: true });
   // eslint-disable-next-line jest-dom/prefer-in-document
   expect(selectedRows).toHaveLength(1);
+  expect(getRows()[4]).not.toHaveClass(rowSelectedClassname);
 
   await userEvent.click(screen.getByRole('gridcell', { name: '2020' }));
   await userEvent.click(screen.getByRole('gridcell', { name: '2022' }));