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

[data grid] Column resizing not working with special characters in column names #12954

Open
cloudcode-hungary opened this issue Apr 30, 2024 · 1 comment · May be fixed by #13069
Open

[data grid] Column resizing not working with special characters in column names #12954

cloudcode-hungary opened this issue Apr 30, 2024 · 1 comment · May be fixed by #13069
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column resize

Comments

@cloudcode-hungary
Copy link

cloudcode-hungary commented Apr 30, 2024 •
edited by github-actions bot

Steps to reproduce

Link to live example: (required)

Forked from here: https://mui.com/x/react-data-grid/

Steps:

  1. Add a column with a " character in the field name.
  2. Try to resize the column.
  3. No resizing happens, the console shows this error:
SyntaxError
Failed to execute 'querySelector' on 'Element': '[data-field="firstName="first_name""]' is not a valid selector.

Current behavior

Not documented, no warning or error on the invalid column names.

Expected behavior

querySelector(`[data-field="${colDef.field}"]`) should be querySelector(`[data-field="${colDef.field.replace('"', '\\"')}"]`)

There could be some more cases

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#escaping_special_characters

Context

We have a very complex column management system, some columns contain very specific configuration of the data which is evaulated by the backend, e.g: sales_statistics.$alias/order_created_date="this_week",warehouse="1,3"/quantity

Your environment

npx @mui/envinfo 
  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
  Binaries:
    Node: 18.11.0 - ~/.nvm/versions/node/v18.11.0/bin/node
    Yarn: 3.2.4 - ~/.nvm/versions/node/v18.11.0/bin/yarn
    npm: 6.14.18 - ~/clouderp/node_modules/.bin/npm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.9.0 => 11.10.5
    @emotion/styled: ^11.8.1 => 11.10.5
    @mui/base:  5.0.0-alpha.116
    @mui/core-downloads-tracker:  5.11.7
    @mui/icons-material: ^5.6.2 => 5.11.0
    @mui/lab: ^5.0.0-alpha.81 => 5.0.0-alpha.118
    @mui/material: ^5.7.0 => 5.11.7
    @mui/private-theming:  5.11.7
    @mui/styled-engine:  5.11.0
    @mui/styled-engine-sc: ^5.7.0 => 5.11.0
    @mui/styles: ^5.7.0 => 5.11.7
    @mui/system:  5.11.7
    @mui/types:  7.2.3
    @mui/utils:  5.11.7
    @mui/x-data-grid:  6.3.0
    @mui/x-data-grid-pro: ^6.3.0 => 6.3.0
    @mui/x-date-pickers:  6.3.0
    @mui/x-date-pickers-pro: ^6.3.0 => 6.3.0
    @mui/x-license-pro:  6.0.4
    @types/react:  18.0.27
    react: 18.1.0 => 18.1.0
    react-dom: 18.1.0 => 18.1.0
    styled-components: ^5.3.5 => 5.3.6

Google Chrome - Version 124.0.6367.91

Search keywords: Column resize querySelector DomException escape

Search keywords:
@cloudcode-hungary cloudcode-hungary added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 30, 2024
@zannager zannager transferred this issue from mui/material-ui Apr 30, 2024
@zannager zannager added the component: data grid This is the name of the generic UI component, not the React module! label Apr 30, 2024
@michelengelen
Copy link
Member

Hey @cloudcode-hungary ... thanks for raising this.

We could escape the " character here, so that it does not mess with the selector:

diff --git a/packages/x-data-grid/src/utils/domUtils.ts b/packages/x-data-grid/src/utils/domUtils.ts
index dd27e95e5..077314f30 100644
--- a/packages/x-data-grid/src/utils/domUtils.ts
+++ b/packages/x-data-grid/src/utils/domUtils.ts
@@ -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="${field.replaceAll('"', '\\"')}"]`)!;
 }

 export function getFieldsFromGroupHeaderElem(colCellEl: Element): string[] {

WDYT @romgrk ?

@michelengelen michelengelen changed the title Column resizing not working with special characters in column names [data grid] Column resizing not working with special characters in column names May 2, 2024
@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 3, 2024
@oukunan oukunan linked a pull request May 9, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column resize
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[data grid] Fix column resize not working with special character oukunan/mui-x
3 participants
@michelengelen @cloudcode-hungary @zannager