[DataGrid] Fix double-click issue (#1919)

mui · Jun 18, 2021 · a75eb4f · a75eb4f
1 parent 3f12d25
commit a75eb4f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx
@@ -23,24 +23,13 @@ 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;
+    // TODO core v5 remove || isIndeterminate, no longer has any effect
+    const isChecked = (totalSelectedRows > 0 && 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;

diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx
@@ -1,11 +1,22 @@
 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);
 
+function getSelectedRows(apiRef) {
+  return Array.from(apiRef.current.getSelectedRows().keys());
+}
+
 describe('<XGrid /> - Selection', () => {
   // TODO v5: replace with createClientRender
   const render = createClientRenderStrictMode();
@@ -115,7 +126,7 @@ describe('<XGrid /> - Selection', () => {
 
   it('should clean the selected ids when the rows prop changes', () => {
     const { setProps } = render(<Test selectionModel={[0, 1, 2]} checkboxSelection />);
-    expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 2]);
+    expect(getSelectedRows(apiRef)).to.deep.equal([0, 1, 2]);
     setProps({
       rows: [
         {
@@ -124,6 +135,32 @@ describe('<XGrid /> - Selection', () => {
         },
       ],
     });
-    expect(apiRef.current.getSelectedRows()).to.have.keys([0]);
+    expect(getSelectedRows(apiRef)).to.deep.equal([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(getSelectedRows(apiRef)).to.deep.equal([0, 1, 2]);
+    fireEvent.click(selectAll);
+    expect(getSelectedRows(apiRef)).to.deep.equal([]);
+    fireEvent.click(selectAll);
+    expect(getSelectedRows(apiRef)).to.deep.equal([2]);
+    fireEvent.click(selectAll);
+    expect(getSelectedRows(apiRef)).to.deep.equal([]);
   });
 });