[DataGrid] improve querySelectors for selecting cell element (mui#7354)

Co-authored-by: Andrew Cherniavskyi <[email protected]> Fixes mui#7093 Fixes mui#7819
cherniavskii · Feb 6, 2023 · fb5d5ba · fb5d5ba
1 parent 7bfa5de
commit fb5d5ba
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);
 }