diff --git a/src/Columns.tsx b/src/Columns.tsx index 31c6d83481..66a09480e4 100644 --- a/src/Columns.tsx +++ b/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) { aria-label="Select Group" tabIndex={props.tabIndex} value={isRowSelected} + onClick={stopPropagation} onChange={(checked) => { onRowSelectionChange({ type: 'ROW', row: props.row, checked, isShiftClick: false }); }} diff --git a/src/cellRenderers/SelectCellFormatter.tsx b/src/cellRenderers/SelectCellFormatter.tsx index 8b8fe62f11..ae641ca092 100644 --- a/src/cellRenderers/SelectCellFormatter.tsx +++ b/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 }); } diff --git a/src/types.ts b/src/types.ts index ba10ddbe53..f229067b7b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -262,7 +262,7 @@ export interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPr export interface RenderCheckboxProps extends Pick< React.InputHTMLAttributes, - 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled' + 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled' | 'onClick' > { onChange: (checked: boolean, shift: boolean) => void; } diff --git a/test/grouping.test.tsx b/test/grouping.test.tsx index f08761fe6f..199816012f 100644 --- a/test/grouping.test.tsx +++ b/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' }));