-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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.
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
[tree view] Can't use itemId
with escaping characters in SimpleTreeView
#13414
Comments
Hey @CarlosAmaral ... that's a tricky one. |
@michelengelen |
We have an escape function for this in the grid, using |
Thanks @romgrk applying this diff would resolve the issue: diff --git a/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewChildrenItemProvider.tsx b/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewChildrenItemProvider.tsx
index 48afd8f36..212741143 100644
--- a/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewChildrenItemProvider.tsx
+++ b/packages/x-tree-view/src/internals/TreeViewProvider/TreeViewChildrenItemProvider.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
+import { escapeOperandAttributeSelector } from '@mui/x-tree-view/internals/utils/utils';
import { useTreeViewContext } from './useTreeViewContext';
import type { UseTreeViewJSXItemsSignature } from '../plugins/useTreeViewJSXItems';
import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
@@ -46,9 +47,11 @@ export function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProvider
return;
}
+ const escapedIdAttr = escapeOperandAttributeSelector(idAttr);
+
const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
const childrenElements = rootRef.current.querySelectorAll(
- `${itemId == null ? '' : `*[id="${idAttr}"] `}[role="treeitem"]:not(*[id="${idAttr}"] [role="treeitem"] [role="treeitem"])`,
+ `${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`,
);
const childrenIds = Array.from(childrenElements).map(
(child) => childrenIdAttrToIdRef.current.get(child.id)!,
diff --git a/packages/x-tree-view/src/internals/utils/utils.ts b/packages/x-tree-view/src/internals/utils/utils.ts
index 5401ae664..661b34206 100644
--- a/packages/x-tree-view/src/internals/utils/utils.ts
+++ b/packages/x-tree-view/src/internals/utils/utils.ts
@@ -12,3 +12,9 @@ export const getActiveElement = (root: Document | ShadowRoot = document): Elemen
return activeEl;
};
+
+// TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
+// https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
+export function escapeOperandAttributeSelector(operand: string): string {
+ return operand.replace(/["\\]/g, '\\$&');
+} WDYT @flaviendelangle ? |
If it fixes the issue, I think it's a great solution 👍 |
I'll open this as good first issue. |
itemId
with escaping characters in SimpleTreeView
@CarlosAmaral: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey. |
Steps to reproduce
Link to live example: (required)
Current behavior
The itemId provided is not resolved thus throwing an error.
Expected behavior
Expected to resolved the tree item id as it did in v6.
Context
No response
Your environment
npx @mui/envinfo
Search keywords: SimpleTreeView, TreeItem
The text was updated successfully, but these errors were encountered: