I'm trying to make the Treeview not collapse every time I select a node. When node is selected it will render button depending on which node you have selected. Here is an example I made. https://codesandbox.io/s/summer-water-33fe7?file=/src/App.js
TreeItem has a disabled prop which will not allow user to collapse the TreeItem on click. You can dynamically set the value of the disabled prop when you do not want it to collapse.
For example :
const [disabled, setDisabled] = useState(true);
<TreeItem nodeId="5" label="Five" disabled={disabled}>
// setDisabled(false); // Set to false when we want it to be collapsable.
I found a way but not sure if this is the best way so basically I added all the ids that I want to be expanded all the time a.k.a every i.d in the data.
const DataTreeView = ({ treeItems }) => {
return (
<TreeView
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
defaultExpanded={[
"root",
"root2",
"Parent 1",
"Parent 2",
"Parent 3",
"Parent 4",
"1",
"2",
"3",
"4"
]}
onNodeSelect={action}
>
{getTreeItemsFromData(treeItems)}
</TreeView>
);
};