opened
tonyhallett
username_0
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Summary 💡

You can select a node by clicking or by pressing space - it should be possible to click or space a selected node to deselect it

## Examples 🌈

It is possible to manage this yourself with the TreeView selected and onNodeSelect props but I think that it should be builtin.

https://codesandbox.io/s/infallible-beaver-hbht7

## Motivation 🔦

I could be displaying some other component based on selection.  If the user has mistakenly selected they should be able to deselect.
TreeView allow deselection
issue
created
tonyhallett
username_0
Note that it is possible for multi select.  When it takes the selectNode path.

from https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/TreeItem/TreeItem.js
```
const handleClick = event => {
    ...

    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);

    ...
    if (!selectionDisabled) {
      if (multiple) {
        if (event.shiftKey) {
          selectRange(event, { end: nodeId });
        } else {
          selectNode(event, nodeId, true);//**************************
        }
      } else {
        selectNode(event, nodeId);
      }
    }
//////////////////

  const handleKeyDown = event => {
    let flag = false;
    const key = event.key;

    if (event.altKey || event.currentTarget !== event.target) {
      return;
    }

    const ctrlPressed = event.ctrlKey || event.metaKey;

    switch (key) {
      case ' ':
        if (nodeRef.current === event.currentTarget) {
          if (multiSelect && event.shiftKey) {
            selectRange(event, { end: nodeId });
          } else if (multiSelect) {
            selectNode(event, nodeId, true);//**************************
          } else {
            selectNode(event, nodeId);
          }
```

selectNode calls the TreeView https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/TreeView/TreeView.js

```
const selectNode = (event, id, multiple = false) => {
    if (id) {
      if (multiple) {
        handleMultipleSelect(event, id); //****************************
      } 
....
const handleMultipleSelect = (event, value) => {
    let newSelected = [];
    if (selected.indexOf(value) !== -1) {
      newSelected = selected.filter(id => id !== value);//******************
    }
....
```

Also note that with click you need ctrl or meta key - with space you do not.
comment
created
joshwooding
username_1
@username_0 we've decided not to implement this in the single-select tree for now. Do you have a use-case for deselecting in a single-selection tree? Note that this will be possible in a checkbox tree.
comment
closed
joshwooding
username_1
issue