[Treeview] Node selection support

Thanks very much for the release of the brand new TreeView component! ❤️ I’d like to request a basic feature for the Treeview component to emit an event when any node is selected.

You may have already planned this, but I couldn’t find any information for it, hence the request.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

A node selected event fired when a node is selected or focused.

Current Behavior 😯

No event is fired at node selection, onNodeToggle event doesn’t fire for leaf nodes, onClick event can be attached to each TreeItem as a workaround, however it doesn’t support keyboard action.

Examples 🌈

• https://demos.telerik.com/kendo-ui/treeview/index
• https://ej2.syncfusion.com/react/demos/#/material/treeview/multiple-selection
• https://www.jqwidgets.com/react/react-tree/index.htm#https://www.jqwidgets.com/react/react-tree/react-tree-defaultfunctionality.htm
• https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/HierarchicalDataStructure/React/Light/
• https://www.primefaces.org/primeng/#/tree
• https://docs.sencha.com/extjs/7.0.0/guides/components/trees.html
• https://www.igniteui.com/tree/overview
• https://www.jqueryscript.net/demo/Tree-Plugin-jQuery-jsTree/
• https://github.com/mar10/fancytree

Context 🔦

I’m implementing something where the rest of the UI needs to be updated according to the selection of the node. This is a much needed feature.

[oliviertassinari]

I’m implementing something where the rest of the UI needs to be updated according to the selection of the node. This is a much needed feature.

What about using the existing onFocus prop?

---

On a similar topic, I would propose the introduction of a component prop to the TreeItem component. People should be able to render a link or a button, something that would handle the click, enter keyboard events natively.

import React from 'react';
import Button from '@material-ui/core/Button';
import Link from '@material-ui/core/Link';
import TreeView from '@material-ui/lab/TreeView';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import TreeItem from '@material-ui/lab/TreeItem';

export default function FileSystemNavigator() {
  return (
    <TreeView defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ChevronRightIcon />}>
      <TreeItem nodeId="1" label="Applications: ">
        <TreeItem component={Link} nodeId="2" label="Calendar : app" />
        <TreeItem component={Button} nodeId="4" label="Webstorm : app" />
      </TreeItem>
    </TreeView>
  );
}

cc @joshwooding

[darewreck54]

Hi,

I was wondering what the status of this was? Right now when a user clicks, the color changes for the background of the selected. However, when you click anywhere outside the previous selected item gets deselected. Is there a way to prevent the deselect unless it another tree item gets selected.

When element is selected:

When you select anywhere outside the tree, the white selection gets deselected.

Right now i’m leveraging off the

 style={{
        '--tree-view-color': color,
        '--tree-view-bg-color': bgColor,
      }}

As a workaround, I could probably create an internal state to manage what is selected, and then apply my own style. Wonder if there is any easier way to do. this thou?

Thanks, Derek