[DataGrid] Fix checked checkbox when empty rows (#1068)

mui · Feb 22, 2021 · cfe13cc · cfe13cc
1 parent b7d1930
commit cfe13cc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/grid/_modules_/grid/components/GridCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/GridCheckboxRenderer.tsx
@@ -24,7 +24,7 @@ export const GridHeaderCheckbox: React.FC<GridColParams> = () => {
 
   React.useEffect(() => {
     const isNewIndeterminate = totalSelectedRows > 0 && totalSelectedRows !== totalRows;
-    const isNewChecked = totalSelectedRows === totalRows || isIndeterminate;
+    const isNewChecked = (totalRows > 0 && totalSelectedRows === totalRows) || isIndeterminate;
     setChecked(isNewChecked);
     setisIndeterminate(isNewIndeterminate);
   }, [isIndeterminate, totalRows, totalSelectedRows]);

diff --git a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx
@@ -46,6 +46,18 @@ describe('<DataGrid /> - Selection', () => {
       expect(row!.classList.contains('Mui-selected')).to.equal(false, 'class mui-selected 2');
       expect(checkbox).to.have.property('checked', false);
     });
+
+    it('with no rows, the checkbox should not be checked', () => {
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid rows={[]} checkboxSelection columns={[{ field: 'brand', width: 100 }]} />
+        </div>,
+      );
+      const selectAll = screen.getByRole('checkbox', {
+        name: /select all rows checkbox/i,
+      });
+      expect(selectAll).to.have.property('checked', false);
+    });
   });
 
   describe('props: selectionModel', () => {