From d19859b3abb9630bad337482a694ceca4af8f1f4 Mon Sep 17 00:00:00 2001 From: futurouz Date: Thu, 9 May 2024 22:52:25 +0700 Subject: [PATCH 1/9] [DataGrid] fix column resize not working with special character --- .../hooks/features/columnResize/useGridColumnResize.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 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..db045f25725b 100644 --- a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -437,6 +437,7 @@ export const useGridColumnResize = ( const storeReferences = (colDef: GridStateColDef, separator: HTMLElement, xStart: number) => { const root = apiRef.current.rootElementRef.current!; + const escapedColDefField = CSS.escape(colDef.field); refs.initialColWidth = colDef.computedWidth; refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth; @@ -445,11 +446,11 @@ export const useGridColumnResize = ( refs.columnHeaderElement = findHeaderElementFromField( apiRef.current.columnHeadersContainerRef!.current!, - colDef.field, + escapedColDefField, ); const headerFilterElement = root.querySelector( - `.${gridClasses.headerFilterRow} [data-field="${colDef.field}"]`, + `.${gridClasses.headerFilterRow} [data-field="${escapedColDefField}"]`, ); if (headerFilterElement) { refs.headerFilterElement = headerFilterElement as HTMLDivElement; @@ -457,7 +458,7 @@ export const useGridColumnResize = ( refs.groupHeaderElements = findGroupHeaderElementsFromField( apiRef.current.columnHeadersContainerRef?.current!, - colDef.field, + escapedColDefField, ); refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current); From 714cc621d201ea7e95c7b8481273189fdadc436a Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 10 May 2024 15:05:21 -0400 Subject: [PATCH 2/9] ci: run From 11a90f2f30f38fcc0b46de46a192383937b934cb Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 15 May 2024 07:12:51 -0400 Subject: [PATCH 3/9] ci: run From feabe565a342624225e8f05f418794a676cd401a Mon Sep 17 00:00:00 2001 From: futurouz Date: Thu, 16 May 2024 22:26:36 +0700 Subject: [PATCH 4/9] fix unit test failed on CSS.escape --- .../src/hooks/features/columnResize/useGridColumnResize.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 db045f25725b..6c034e513dd4 100644 --- a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -437,7 +437,10 @@ export const useGridColumnResize = ( const storeReferences = (colDef: GridStateColDef, separator: HTMLElement, xStart: number) => { const root = apiRef.current.rootElementRef.current!; - const escapedColDefField = CSS.escape(colDef.field); + // HACK: The jsdom test is failing because CSS.escape doesn't exist in that context. + // We have decided that we want to preserve the bug in jsdom + // https://github.com/mui/mui-x/pull/13069#discussion_r1603270444 + const escapedColDefField = typeof CSS === 'undefined' ? colDef.field : CSS.escape(colDef.field); refs.initialColWidth = colDef.computedWidth; refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth; From 75d624516bc0c6987f65dd9d699dd0710936082b Mon Sep 17 00:00:00 2001 From: futurouz Date: Thu, 16 May 2024 22:28:42 +0700 Subject: [PATCH 5/9] ci: run From 97cb2a0248971b0de8e42c222c630d52977e6619 Mon Sep 17 00:00:00 2001 From: futurouz Date: Sun, 26 May 2024 13:32:02 +0700 Subject: [PATCH 6/9] use `escapeOperandAttributeSelector` instead of `CSS.escape` --- .../features/columnResize/useGridColumnResize.tsx | 11 ++++------- packages/x-data-grid/src/utils/domUtils.ts | 10 +++++----- 2 files changed, 9 insertions(+), 12 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 6c034e513dd4..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, @@ -437,10 +438,6 @@ export const useGridColumnResize = ( const storeReferences = (colDef: GridStateColDef, separator: HTMLElement, xStart: number) => { const root = apiRef.current.rootElementRef.current!; - // HACK: The jsdom test is failing because CSS.escape doesn't exist in that context. - // We have decided that we want to preserve the bug in jsdom - // https://github.com/mui/mui-x/pull/13069#discussion_r1603270444 - const escapedColDefField = typeof CSS === 'undefined' ? colDef.field : CSS.escape(colDef.field); refs.initialColWidth = colDef.computedWidth; refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth; @@ -449,11 +446,11 @@ export const useGridColumnResize = ( refs.columnHeaderElement = findHeaderElementFromField( apiRef.current.columnHeadersContainerRef!.current!, - escapedColDefField, + colDef.field, ); const headerFilterElement = root.querySelector( - `.${gridClasses.headerFilterRow} [data-field="${escapedColDefField}"]`, + `.${gridClasses.headerFilterRow} [data-field="${escapeOperandAttributeSelector(colDef.field)}"]`, ); if (headerFilterElement) { refs.headerFilterElement = headerFilterElement as HTMLDivElement; @@ -461,7 +458,7 @@ export const useGridColumnResize = ( refs.groupHeaderElements = findGroupHeaderElementsFromField( apiRef.current.columnHeadersContainerRef?.current!, - escapedColDefField, + colDef.field, ); refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current); diff --git a/packages/x-data-grid/src/utils/domUtils.ts b/packages/x-data-grid/src/utils/domUtils.ts index 0653da9d28a1..dfb2ed8bbe1e 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,7 @@ export function getFieldsFromGroupHeaderElem(colCellEl: Element): string[] { } export function findGroupHeaderElementsFromField(elem: Element, field: string): Element[] { - return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []); + return Array.from(elem.querySelectorAll(`[data-fields*="|-${escapeOperandAttributeSelector(field)}-|"]`) ?? []); } export function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateApiCommunity) { @@ -234,14 +234,14 @@ 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"]`, ), ); } From 9f913027d66c6f38250ec1f780ad3e983d3562ea Mon Sep 17 00:00:00 2001 From: futurouz Date: Thu, 30 May 2024 16:47:04 +0700 Subject: [PATCH 7/9] prettier --- packages/x-data-grid/src/utils/domUtils.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/x-data-grid/src/utils/domUtils.ts b/packages/x-data-grid/src/utils/domUtils.ts index dfb2ed8bbe1e..9ca1179b6aab 100644 --- a/packages/x-data-grid/src/utils/domUtils.ts +++ b/packages/x-data-grid/src/utils/domUtils.ts @@ -76,7 +76,11 @@ export function getFieldsFromGroupHeaderElem(colCellEl: Element): string[] { } export function findGroupHeaderElementsFromField(elem: Element, field: string): Element[] { - return Array.from(elem.querySelectorAll(`[data-fields*="|-${escapeOperandAttributeSelector(field)}-|"]`) ?? []); + return Array.from( + elem.querySelectorAll( + `[data-fields*="|-${escapeOperandAttributeSelector(field)}-|"]`, + ) ?? [], + ); } export function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateApiCommunity) { @@ -234,7 +238,9 @@ 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="${escapeOperandAttributeSelector(field)}"][role="columnheader"]`); + return headers.querySelector( + `:scope > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="columnheader"]`, + ); } export function findGridCells(api: GridPrivateApiCommunity, field: string) { From d52bbc043cf31bc60199d1e5a4e0aaf9a1470cb4 Mon Sep 17 00:00:00 2001 From: futurouz Date: Thu, 30 May 2024 16:48:20 +0700 Subject: [PATCH 8/9] ci: run From 729ff0dcf13a6a770fa5cfbc5484d25fd68e4201 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Thu, 30 May 2024 07:01:49 -0400 Subject: [PATCH 9/9] ci: run