[TreeView] If not all nodeId`s are different opening an item crashes the browser

[doberkofler]

Steps to reproduce

https://codesandbox.io/s/jovial-stitch-zn4g9h?file=/src/demo.tsx:99-115

Current behavior

If the TreeView component contains TreeItem components with the same nodeId and an item is opened the browser hangs. Chrome completely hangs and can only be killed and Safari hangs but the window can can be refreshed.

import * as React from "react";
import Paper from "@mui/material/Paper";
import { TreeView } from "@mui/x-tree-view/TreeView";
import { TreeItem } from "@mui/x-tree-view/TreeItem";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";

export default function DataGridProDemo() {
  return (
    <>
      <TreeView
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
      >
        <TreeItem key="1" nodeId="1" label="foo">
          <TreeItem key="2" nodeId="1" label="bar">
            <Paper>Hello World</Paper>
          </TreeItem>
        </TreeItem>
      </TreeView>
    </>
  );
}

Expected behavior

A warning and not to "kill" the browser

Context

Just testing the TreeView component

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.0
  Binaries:
    Node: 20.8.1 - ~/.nvm/versions/node/v20.8.1/bin/node
    npm: 10.2.1 - ~/.nvm/versions/node/v20.8.1/bin/npm
  Browsers:
    Chrome: 118.0.5993.70
    Safari: 17.0

Search keywords: treeview fatal error

[flaviendelangle]

Duplicates #10230