prevent row selection if click is on checkbox

mui · Jan 20, 2022 · e3845f0 · e3845f0
1 parent b9afc07
commit e3845f0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -40,10 +40,6 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
       apiRef.current.publishEvent(GridEvents.rowSelectionCheckboxChange, params, event);
     };
 
-    const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
-      event.stopPropagation();
-    };
-
     React.useLayoutEffect(() => {
       if (tabIndex === 0 && element) {
         element!.tabIndex = -1;
@@ -78,7 +74,6 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
         tabIndex={tabIndex}
         checked={!!value}
         onChange={handleChange}
-        onClick={handleClick}
         className={classes.root}
         color="primary"
         inputProps={{ 'aria-label': 'Select Row checkbox' }}

diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts
@@ -338,6 +338,10 @@ export const useGridSelection = (
         gridClasses.cell,
       );
       const field = cellClicked?.getAttribute('data-field');
+      if (field === '__check__') {
+        // click on checkbox should not trigger row selection
+        return;
+      }
       if (field) {
         const column = apiRef.current.getColumn(field);
         if (column.type === 'actions') {

diff --git a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx
@@ -183,6 +183,19 @@ describe('<DataGrid /> - Selection', () => {
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
     });
 
+    it('should set focus ont the cell when clicking the checkbox', () => {
+      render(<TestDataGridSelection checkboxSelection />);
+      expect(getActiveCell()).to.equal(null);
+
+      // simulate click
+      const checkboxInput = getCell(0, 0).querySelector('input');
+
+      fireEvent.mouseUp(checkboxInput);
+      fireEvent.click(checkboxInput);
+
+      expect(getActiveCell()).to.equal('0-0');
+    });
+
     it('should select all visible rows regardless of pagination', () => {
       render(<TestDataGridSelection checkboxSelection pageSize={1} rowsPerPageOptions={[1]} />);
       const selectAllCheckbox = document.querySelector('input[type="checkbox"]');