[DataGrid] Fix double-click issue

docs/pages/index.js

@@ -1,3 +1,26 @@
-import LandingPage from '@material-ui/monorepo/docs/pages/index';
+import * as React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
 
-export default LandingPage;
+const rows = [
+  {
+    id: 0,
+    brand: 'Nike',
+  },
+  {
+    id: 1,
+    brand: 'Adidas',
+  },
+  {
+    id: 2,
+    brand: 'Puma',
+  },
+];
+const columns = [{ field: 'brand' }];
+
+export default function DataGridDemo() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
+    </div>
+  );
+}

packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx

@@ -23,24 +23,12 @@ export const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnH
     const totalSelectedRows = useGridSelector(apiRef, selectedGridRowsCountSelector);
     const totalRows = useGridSelector(apiRef, gridRowCountSelector);
 
-    const [isIndeterminate, setIsIndeterminate] = React.useState(
-      totalSelectedRows > 0 && totalSelectedRows !== totalRows,
-    );
-    const [isChecked, setChecked] = React.useState(
-      totalSelectedRows === totalRows || isIndeterminate,
-    );
-
-    React.useEffect(() => {
-      const isNewIndeterminate = totalSelectedRows > 0 && totalSelectedRows !== totalRows;
-      const isNewChecked = (totalRows > 0 && totalSelectedRows === totalRows) || isIndeterminate;
-      setChecked(isNewChecked);
-      setIsIndeterminate(isNewIndeterminate);
-    }, [isIndeterminate, totalRows, totalSelectedRows]);
+    const isIndeterminate = totalSelectedRows > 0 && totalSelectedRows !== totalRows;
+    const isChecked = totalSelectedRows === totalRows || isIndeterminate;
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const checked = event.target.checked;
-      setChecked(checked);
-      apiRef!.current.selectRows(visibleRowIds, checked);
+      apiRef!.current.selectRows(visibleRowIds, checked, !event.target.indeterminate);
     };
 
     const tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;

packages/grid/x-grid/src/tests/selection.XGrid.test.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
-import { createClientRenderStrictMode } from 'test/utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
+import { getColumnValues } from 'test/utils/helperFn';
+import {
+  // @ts-expect-error need to migrate helpers to TypeScript
+  screen,
+  createClientRenderStrictMode,
+  // @ts-expect-error need to migrate helpers to TypeScript
+  fireEvent,
+} from 'test/utils';
 import { GridApiRef, GridComponentProps, useGridApiRef, XGrid } from '@material-ui/x-grid';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -126,4 +133,30 @@ describe('<XGrid /> - Selection', () => {
     });
     expect(apiRef.current.getSelectedRows()).to.have.keys([0]);
   });
+
+  it('should select only filtered rows after filter is applied', () => {
+    render(<Test checkboxSelection />);
+    const selectAll = screen.getByRole('checkbox', {
+      name: /select all rows checkbox/i,
+    });
+    apiRef.current.setFilterModel({
+      items: [
+        {
+          columnField: 'brand',
+          operatorValue: 'contains',
+          value: 'Puma',
+        },
+      ],
+    });
+    expect(getColumnValues(1)).to.deep.equal(['Puma']);
+    fireEvent.click(selectAll);
+    // TODO fix, should be only 2
+    expect(Array.from(apiRef.current.getSelectedRows().keys())).to.deep.equal([0, 1, 2]);
+    fireEvent.click(selectAll);
+    expect(Array.from(apiRef.current.getSelectedRows().keys())).to.deep.equal([]);
+    fireEvent.click(selectAll);
+    expect(Array.from(apiRef.current.getSelectedRows().keys())).to.deep.equal([2]);
+    fireEvent.click(selectAll);
+    expect(Array.from(apiRef.current.getSelectedRows().keys())).to.deep.equal([]);
+  });
 });