[TreeView] In the RichTreeView, do not use the item id as the HTML id attribute

[flaviendelangle]

Problem

When using the following code:

const ITEMS = [{ id: '1', label: 'Item 1' }]

<RichTreeView id="my-tree" items={ITEMS} />

Will produce the following HTML:

<ul id="my-tree">
  <li class="MuiTreeItem-root" id="1" />
</ul>

With this behavior, it is very very easy to unintentionally set an id attribute to your item that is not unique in the whole document.$

Solution

No setting the id attribute in state allows us to use the fallback which is ${treeId}-${nodeId}:

<ul id="my-tree">
  <li class="MuiTreeItem-root" id="my-tree-1" />
</ul>

We could add a new prop getItemIdAttribute to help people customize the id attribute.
Otherwise, they risk to do ugly things such as:

<RichTreeView
  items={ITEMS}
  slotProps={{
    item: ({ someProp }) => ({ id: someProp }),
  }}
/>

And if they do that, we won't be able to use the ID at the TreeView level to set the aria-activedescendant.

[mui-bot]

Deploy preview: https://deploy-preview-12319--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 4ea6f7c

[noraleonte]

Nice addition! 🎉

[LukasTy]

Nice improvement! 👏