[data grid] Fix column resize not working with special character (#13069

) Co-authored-by: Rom Grk <romgrk.cc@gmail.com>
mui · May 31, 2024 · e0cb373 · e0cb373
1 parent a4c6f4b
commit e0cb373
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -19,6 +19,7 @@ import {
   findParentElementFromClassName,
   findLeftPinnedHeadersAfterCol,
   findRightPinnedHeadersBeforeCol,
+  escapeOperandAttributeSelector,
 } from '../../../utils/domUtils';
 import {
   GridAutosizeOptions,
@@ -449,7 +450,7 @@ export const useGridColumnResize = (
     );
 
     const headerFilterElement = root.querySelector(
-      `.${gridClasses.headerFilterRow} [data-field="${colDef.field}"]`,
+      `.${gridClasses.headerFilterRow} [data-field="${escapeOperandAttributeSelector(colDef.field)}"]`,
     );
     if (headerFilterElement) {
       refs.headerFilterElement = headerFilterElement as HTMLDivElement;

diff --git a/packages/x-data-grid/src/utils/domUtils.ts b/packages/x-data-grid/src/utils/domUtils.ts
@@ -10,7 +10,7 @@ export function findParentElementFromClassName(elem: Element, className: string)
   return elem.closest(`.${className}`);
 }
 
-function escapeOperandAttributeSelector(operand: string): string {
+export function escapeOperandAttributeSelector(operand: string): string {
   return operand.replace(/["\\]/g, '\\$&');
 }
 
@@ -68,15 +68,19 @@ export function getFieldFromHeaderElem(colCellEl: Element): string {
 }
 
 export function findHeaderElementFromField(elem: Element, field: string): HTMLDivElement {
-  return elem.querySelector(`[data-field="${field}"]`)!;
+  return elem.querySelector(`[data-field="${escapeOperandAttributeSelector(field)}"]`)!;
 }
 
 export function getFieldsFromGroupHeaderElem(colCellEl: Element): string[] {
   return colCellEl.getAttribute('data-fields')!.slice(2, -2).split('-|-');
 }
 
 export function findGroupHeaderElementsFromField(elem: Element, field: string): Element[] {
-  return Array.from(elem.querySelectorAll<HTMLDivElement>(`[data-fields*="|-${field}-|"]`) ?? []);
+  return Array.from(
+    elem.querySelectorAll<HTMLDivElement>(
+      `[data-fields*="|-${escapeOperandAttributeSelector(field)}-|"]`,
+    ) ?? [],
+  );
 }
 
 export function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateApiCommunity) {
@@ -234,14 +238,16 @@ export function findRightPinnedHeadersBeforeCol(api: GridPrivateApiCommunity, co
 
 export function findGridHeader(api: GridPrivateApiCommunity, field: string) {
   const headers = api.columnHeadersContainerRef!.current!;
-  return headers.querySelector(`:scope > div > [data-field="${field}"][role="columnheader"]`);
+  return headers.querySelector(
+    `:scope > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="columnheader"]`,
+  );
 }
 
 export function findGridCells(api: GridPrivateApiCommunity, field: string) {
   const container = api.virtualScrollerRef!.current!;
   return Array.from(
     container.querySelectorAll(
-      `:scope > div > div > div > [data-field="${field}"][role="gridcell"]`,
+      `:scope > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`,
     ),
   );
 }