From e0cb373f5bba687eb6a2b62e71e0aeda644a338f Mon Sep 17 00:00:00 2001
From: Ou/Olly Kunanan Tassuwan <kunanan.tw@gmail.com>
Date: Fri, 31 May 2024 09:44:57 +0700
Subject: [PATCH] [data grid] Fix column resize not working with special
 character (#13069)

Co-authored-by: Rom Grk <romgrk.cc@gmail.com>
---
 .../columnResize/useGridColumnResize.tsx         |  3 ++-
 packages/x-data-grid/src/utils/domUtils.ts       | 16 +++++++++++-----
 2 files changed, 13 insertions(+), 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
index 5e3cc909e513..f90184394445 100644
--- 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
index 0653da9d28a1..9ca1179b6aab 100644
--- 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,7 +68,7 @@ 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[] {
@@ -76,7 +76,11 @@ export function getFieldsFromGroupHeaderElem(colCellEl: Element): string[] {
 }
 
 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"]`,
     ),
   );
 }