[TreeView] Support itemId with escaping characters when using `Simp…

…leTreeView` (#13487)

Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>
Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com>

packages/x-tree-view/src/TreeItem/TreeItem.test.tsx

@@ -47,6 +47,18 @@ describeTreeView<[]>('TreeItem component', ({ render, treeItemComponentName }) =
 
       expect(response.getItemContent('1').textContent).to.equal('ABCDEF');
     });
+
+    it('should render TreeItem when itemId prop is escaping characters without throwing an error', function test() {
+      if (treeItemComponentName === 'TreeItem2') {
+        this.skip();
+      }
+
+      const response = render({
+        items: [{ id: 'C:\\\\', label: 'ABCDEF' }],
+      });
+
+      expect(response.getItemContent('C:\\\\').textContent).to.equal('ABCDEF');
+    });
   });
 });
 

packages/x-tree-view/src/internals/TreeViewProvider/TreeViewChildrenItemProvider.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from './useTreeViewContext';
+import { escapeOperandAttributeSelector } from '../utils/utils';
 import type { UseTreeViewJSXItemsSignature } from '../plugins/useTreeViewJSXItems';
 import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
 import type { UseTreeViewIdSignature } from '../plugins/useTreeViewId';
@@ -47,8 +48,9 @@ export function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProvider
     }
 
     const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
+    const escapedIdAttr = escapeOperandAttributeSelector(idAttr);
     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)!,

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, '\\$&');
+}