Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DataGrid] Fix column resize not working with special character #13069

Merged
merged 9 commits into from
May 31, 2024
Merged

[DataGrid] Fix column resize not working with special character #13069

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d19859b
[DataGrid] fix column resize not working with special character
oukunan May 9, 2024
714cc62
ci: run
romgrk May 10, 2024
11a90f2
ci: run
romgrk May 15, 2024
feabe56
fix unit test failed on CSS.escape
oukunan May 16, 2024
75d6245
ci: run
oukunan May 16, 2024
97cb2a0
use `escapeOperandAttributeSelector` instead of `CSS.escape`
oukunan May 26, 2024
9f91302
prettier
oukunan May 30, 2024
d52bbc0
ci: run
oukunan May 30, 2024
729ff0d
ci: run
romgrk May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
findParentElementFromClassName,
findLeftPinnedHeadersAfterCol,
findRightPinnedHeadersBeforeCol,
escapeOperandAttributeSelector,
} from '../../../utils/domUtils';
import {
GridAutosizeOptions,
Expand Down Expand Up @@ -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;
Expand Down
16 changes: 11 additions & 5 deletions packages/x-data-grid/src/utils/domUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, '\\$&');
}

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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"]`,
),
);
}
Expand Down