[DataGrid] Fix getCellElement method not working with pinned columns (#…

…7844) Co-authored-by: yared tsegaye <34584266+yaredtsy@users.noreply.github.com>
mui · Feb 7, 2023 · 100f1eb · 100f1eb
1 parent aab922b
commit 100f1eb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
@@ -571,6 +571,17 @@ describe('<DataGridPro /> - Column pinning', () => {
  expect(apiRef.current.isColumnPinned('currencyPair')).to.equal(false);
  });
  });
+
+ // See https://github.com/mui/mui-x/issues/7819
+ describe('`getCellElement` method should return cell element', () => {
+ it('should return the correct value', () => {
+ render(
+ <TestCase initialState={{ pinnedColumns: { left: ['id'], right: ['price16M'] } }} />,
+ );
+ const cellElement = apiRef.current.getCellElement(0, 'currencyPair');
+ expect(cellElement).not.to.equal(null);
+ });
+ });
  });
 
  describe('column menu', () => {

diff --git a/packages/grid/x-data-grid/src/utils/domUtils.ts b/packages/grid/x-data-grid/src/utils/domUtils.ts
@@ -34,19 +34,19 @@ export function getGridColumnHeaderElement(root: Element, field: string) {
  `[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`,
  );
 }
+function getGridRowElementSelector(id: GridRowId): string {
+ return `.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`;
+}
 
 export function getGridRowElement(root: Element, id: GridRowId) {
- return root.querySelector<HTMLDivElement>(
- `.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`,
- );
+ return root.querySelector<HTMLDivElement>(getGridRowElementSelector(id));
 }
 
 export function getGridCellElement(root: Element, { id, field }: { id: GridRowId; field: string }) {
- const row = getGridRowElement(root, id);
- if (!row) {
- return null;
- }
- return row.querySelector<HTMLDivElement>(
- `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`,
- );
+ const rowSelector = getGridRowElementSelector(id);
+ const cellSelector = `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(
+ field,
+ )}"]`;
+ const selector = `${rowSelector} ${cellSelector}`;
+ return root.querySelector<HTMLDivElement>(selector);
 }