[DataGridPremium] Fix leafField to have correct focus value (#7950)

mui · Feb 16, 2023 · c120409 · c120409
1 parent 39190c7
commit c120409
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx
@@ -178,6 +178,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
  const leafParams: GridRenderCellParams = {
  ...params.api.getCellParams(params.id, leafField!),
  api: params.api,
+ hasFocus: params.hasFocus,
  };
  if (leafColDef.renderCell) {
  return leafColDef.renderCell(leafParams);
@@ -308,6 +309,7 @@ export const createGroupingColDefForAllGroupingCriteria = ({
  const leafParams: GridRenderCellParams = {
  ...params.api.getCellParams(params.id, leafField!),
  api: params.api,
+ hasFocus: params.hasFocus,
  };
  if (leafColDef.renderCell) {
  return leafColDef.renderCell(leafParams);

diff --git a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 // @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils';
 import {
  getColumnHeaderCell,
  getColumnHeadersTextContent,
  getColumnValues,
+ getCell,
 } from 'test/utils/helperFn';
 import { expect } from 'chai';
 import {
@@ -814,6 +815,33 @@ describe('<DataGridPremium /> - Row Grouping', () => {
  'Custom leaf',
  ]);
  });
+
+ // See https://github.com/mui/mui-x/issues/7949
+ it('should correctly pass `hasFocus` to `renderCell` defined on the leafColDef', () => {
+ const renderIdCell = spy((params) => `Focused: ${params.hasFocus}`);
+
+ render(
+ <Test
+ columns={[
+ {
+ field: 'id',
+ type: 'number',
+ renderCell: renderIdCell,
+ },
+ {
+ field: 'category1',
+ },
+ ]}
+ initialState={{ rowGrouping: { model: ['category1'] } }}
+ groupingColDef={{ leafField: 'id' }}
+ defaultGroupingExpansionDepth={-1}
+ />,
+ );
+
+ userEvent.mousePress(getCell(1, 0));
+ expect(renderIdCell.lastCall.firstArg.field).to.equal('id');
+ expect(getCell(1, 0)).to.have.text('Focused: true');
+ });
  });
 
  describe('prop: groupColDef.headerName', () => {