[TreeView] Expand/collapse node only when clicking on expand/collapse icon #19953

LaurianeDPX · 2020-03-03T08:34:27Z

I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When I click on a tree item that has children, the node expands, wherever I click on the line. While this behavior might be ok for most users, I would like to have the possibility to expand/collapse only when I click on the expand/collapse icon - not on the label.

Motivation 🔦

In my project, I have a tree and I'd like to display a panel with information about a node when I click on it.
When my node does not have children, it is very easy to achieve this behavior. But when my node has children, it expends at the same time its information are displayed, which is not the behavior I want. So I lack a way to have a different behavior when I click on the label (display node info) and when I click on the expand/collapse icon (expand/collapse the node).

MatthieuCoelho · 2020-03-03T08:53:44Z

I have the same use case, it could be useful !

tonyhallett · 2020-03-11T15:37:04Z

Here is a workaround.

You need to import the TreeViewContext

Prevent the label click from being processed by the wrapped TreeItem.

Use the normal click handling code omitting the toggle expansion logic.

function ExpandIconOnlyTreeItem(props:TreeItemProps){
  const {label,...other} = props;
  const context = useContext(TreeViewContext.default) as any;

  const focused = context.isFocused ? context.isFocused(props.nodeId) : false;
  const labelClicked = useCallback(
    (event:any) => {
      if (!focused) {
        context.focus(props.nodeId);
      }
  
      const multiple = context.multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
  
      
  
      if (!context.selectionDisabled) {
        if (multiple) {
          if (event.shiftKey) {
            context.selectRange(event, { end: props.nodeId });
          } else {
            context.selectNode(event, props.nodeId, true);
          }
        } else {
          context.selectNode(event, props.nodeId);
        }
      }
      event.stopPropagation()
      if (props.onClick) {
        props.onClick(event);
      }
    }
  ,[]);
  
  return <TreeItem {...other} label={<span onClick={labelClicked}>{label}</span>}/>
}

guicostaarantes · 2020-03-19T11:30:57Z

@tonyhallett can you please specify how exactly you imported TreeViewContext in your workaround?

Also thanks for the commit, it'll be much more elegant to solve it by adding the iconClickExpandOnly prop to TreeView.

tonyhallett · 2020-03-19T11:44:15Z

const TreeViewContext = require('@material-ui/lab/esm/TreeView/TreeViewContext');

Also as mentioned you can use expanded and onNodeToggle and check the event as I did in the pull request instead of using the private TreeViewContext.
https://github.com/mui-org/material-ui/blob/176bf440590df95cccae46768cb5c0475cc6746f/packages/material-ui-lab/src/TreeItem/TreeItem.js#L175

savissimo · 2020-03-30T15:58:52Z

Could we have an option to expand when clicking the icon or the label, but collapsing only when clicking the icon?

eps1lon · 2020-03-30T16:15:53Z

Could we have an option to expand when clicking the icon or the label, but collapsing only when clicking the icon?

We're probably going with a solution that enables checking in an onClick handler if the click came from the icon or label and then you can customize this behavior. Props-based approaches don't scale very well for one-off use cases.

savissimo · 2020-03-30T22:22:15Z

We're probably going with a solution that enables checking in an onClick handler if the click came from the icon or label and then you can customize this behavior. Props-based approaches don't scale very well for one-off use cases.

Fine for me. It would be great to have a mechanism to stop the propagation of the event. Like, in the onSelect event handler, a boolean that says whether the item will expand, whether it will be selected. That would give us complete flexibility, covering pretty much any desired behaviour, while keeping the props under control.

(If that is exactly what you were planning to do... well, great :) )

guicostaarantes · 2020-04-09T00:40:56Z

@eps1lon I think I don't completely understand the approach you described.

I think you may have suggested that the fix is removing the onClick={handleClick} from the content and inserting onClick = {() => handleClick('icon')} in the icon and onClick = {() => handleClick('label')} in the label, and then using this as input to control the behavior.

I think you may also have suggested that the code would use the event argument on handleClick to know if the click was in the icon or in the label (maybe via event.target).

I'm trying to implement this feature and PR but this is my first time contributing to an open source project, so I could really use some guidance. Thanks.

tonyhallett · 2020-04-16T18:19:18Z

I have create a React hook that can be used to get the desired behaviour, including that desired by @savissimo.

npm useseparatetoggleclick.
codesandbox demo

@guicostaarantes - I can see where the confusion lies.

We're probably going with a solution that enables checking in an onClick handler if the click came from the icon or label and then you can customize this behavior.

@eps1lon I think I don't completely understand the approach you described.

If you see the comment from @eps1lon on the pull request that I made
#20087 (comment)

I think we should rather use the approach we use with the other components: Add labelProps that are spread to the {label} and then you can intercept clicks that happen on the label.

By spreading props on Typography it will be possible to add an onClick handler which can be used in the same manner as my hook ( which added an onClick to the icon. We only need the event information for all label clicks or all icon clicks ).

I will update my pull request accordingly tomorrow. Even so, to me the hook seems to be a better solution.

I will also create another pull request tomorrow that determines if the click is from label or icon and surfaces this information to onNodeToggle as an additional argument - 'label'|'icon'|'keyboard'.

Then @eps1lon can choose to have either / both and possibly to include the hook.

tonyhallett · 2020-04-19T14:51:33Z

sandbox using the new onNodeToggle (#20609) to allow expansion only for icon ( or label ) click. Hooks can be created that are similar ( and simpler ) to npm useseparatetoggleclick.

isrsen1 · 2020-04-21T20:05:26Z

@tonyhallett is it possible to attach onClick event on label only with useseparatetoggleclick package?

tonyhallett · 2020-04-22T07:14:07Z

@isrsen1 the purpose of the useseparatetoggleclick is to manage separated click toggling for you. If you specifically need an onclick on the label provide a span as the label and handle the click on that.

adamkulasiak · 2020-05-05T05:23:51Z

@tonyhallett is it possible to set default expanded nodes with useseparatetoggleclick package?

turnkeyDoug · 2020-05-06T15:57:58Z

@tonyhallett Thanks so much for useseparatetoggleclick - I am curious... is this a "temporary" solution that will be replaced once this feature comes out of lab? (and btw - what is the best way to find out when things leave lab and go to core?)

turnkeyDoug · 2020-05-06T19:41:06Z

@tonyhallett Just by way of update (and for future people with the problem)... I found that the best path to solving this was to take over the selection/expanded logic that you guys are already exposing and have a demo for on this page under "Controlled tree view"... (though I think it would be cool if there were behavior props right on the tree)... this method allows me do all sorts of other behaviour easily anyway

`
let selectingNode = false

const handleToggle = (event, nodeIds) => {
if ( !selectingNode ) {
setExpanded(nodeIds);
selectingNode = false
//doSomethingElse?
}
};

const handleSelect = (event, nodeIds) => {
selectingNode = true
// do something else
}
`

NiroSenor · 2020-05-08T15:38:16Z

@turnkeyDoug how would you prevent a node being selected i.e. stopping the onNodeSelect function when an icon is clicked? Could you share your code snippet please on how you resolved it as mentioned above?

mikeizzy · 2020-05-27T06:27:58Z

Not the most efficient, but the workaround that worked for me was to check if your handle is a parent of the event target:

const [expanded, setExpanded] = React.useState([]);
const handleToggle = (event, nodeIds) => {
  if (event.target.closest('.someClass')) {
    setExpanded(nodeIds);
  }
};

<TreeView onNodeToggle={handleToggle} expanded={expanded}>
  ...
</TreeView>

NiroSenor · 2020-05-29T12:25:52Z

Hi @mikeizzy, do you have some some sample code in somewhere I can look at... I am a total rookie in coding working my way around - Thanks!!!

mikeizzy · 2020-05-29T13:04:30Z

The controlled TreeView example is on their docs site:
https://material-ui.com/components/tree-view/#controlled-tree-view

Read about using state hooks on the React official site:
https://reactjs.org/docs/hooks-state.html

Using the DOM's "closest" method:
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

-you can setExpanded only if the clicked element is a child of whichever node you decide to be your control.

  const handleToggle = (event, nodeIds) => {
    if (event.target.closest(".MuiTreeItem-iconContainer")) {
      setExpanded(nodeIds);
    }
  };

NiroSenor · 2020-06-05T14:31:21Z

Thank you @mikeizzy,

I implemented your suggestion. May I request if you have a solution for how to prevent onNodeSelect when you expand/collapse icon. I would wish only to expand/collapse (onNodeToggle) icon when I click on Icon but not select any particular node (onNodeSelect)

flora8984461 · 2020-07-31T22:18:19Z

Thank you @mikeizzy,

I implemented your suggestion. May I request if you have a solution for how to prevent onNodeSelect when you expand/collapse icon. I would wish only to expand/collapse (onNodeToggle) icon when I click on Icon but not select any particular node (onNodeSelect)

Also looking for this. Thank you.

cogier · 2020-08-31T20:32:48Z

I don't think this has been mentioned yet, but since version v4.0.0-alpha.52 of material ui lab you can specify the onLabelClick prop.
You can then call event.preventDefault() to prevent onNodeToggle from being called.
Like this
onLabelClick={(event) => {event.preventDefault();}}

https://material-ui.com/api/tree-item/

Jared-Dahlke · 2020-09-27T02:10:04Z

@NiroSenor @flora8984461
Here is @mikeizzy solution expanded to include "only select if clicking label" functionality:

//only expand if icon was clicked
const handleToggle = (event, nodeIds) => {
    event.persist()
    let iconClicked = event.target.closest(".MuiTreeItem-iconContainer")
    if(iconClicked) {
      setExpanded(nodeIds);
    }
  };

//only select if icon wasn't clicked
  const handleSelect = (event, accountId) => {
    event.persist()
    let iconClicked = event.target.closest(".MuiTreeItem-iconContainer")
    if(!iconClicked) {
      setSelected(accountId);
    }
  };

This works perfectly, but I can't believe I just spent an hour and a half trying to get this functionality to work!

flora8984461 · 2020-10-14T01:56:05Z

@NiroSenor @flora8984461
Here is @mikeizzy solution expanded to include "only select if clicking label" functionality:
//only expand if icon was clicked
const handleToggle = (event, nodeIds) => {
    event.persist()
    let iconClicked = event.target.closest(".MuiTreeItem-iconContainer")
    if(iconClicked) {
      setExpanded(nodeIds);
    }
  };

//only select if icon wasn't clicked
  const handleSelect = (event, accountId) => {
    event.persist()
    let iconClicked = event.target.closest(".MuiTreeItem-iconContainer")
    if(!iconClicked) {
      setSelected(accountId);
    }
  };
This works perfectly, but I can't believe I just spent an hour and a half trying to get this functionality to work!

Thank you so much for your great work!

mInzamamMalik · 2020-11-17T13:36:14Z

I have same issue, it always close on click even when I dont want it to be closed

mInzamamMalik · 2020-11-17T15:24:23Z

Here is the solution I did:

 const handleToggle = (event, nodeIds) => {
    console.log("toggle changer");
    console.log("nodeIds:", nodeIds);
    console.log("selected:", selected);
    console.log("expanded:", expanded);

    const A = nodeIds;
    const B = expanded;
    const clicked = A.filter((n) => !B.includes(n))[0];

    const _A = expanded;
    const _B = nodeIds;
    const closed = _A.filter((n) => !_B.includes(n))[0];

    console.log("clicked: ", clicked);
    console.log("closed: ", closed);

    if (clicked === selected) {
      setExpanded(nodeIds);
    } else if (selected !== closed) {
      setSelected(nodeIds);
    } else {
      setExpanded(nodeIds);
    }
  };

I just tweaked this code a little bit https://material-ui.com/components/tree-view/#controlled-tree-view
and changed handleToggle functions a little bit according to my need,

Here is what I have achived for my specific usecase:

any better solution is always welcome 😊

suwampy · 2021-01-28T18:15:35Z

korean plz :-(

hoanvotran · 2021-06-25T08:31:53Z

Fantastic Solution!

@NiroSenor @flora8984461
Here is @mikeizzy solution expanded to include "only select if clicking label" functionality:
//only expand if icon was clicked
const handleToggle = (event, nodeIds) => {
    event.persist()
    let iconClicked = event.target.closest(".MuiTreeItem-iconContainer")
    if(iconClicked) {
      setExpanded(nodeIds);
    }
  };

//only select if icon wasn't clicked
  const handleSelect = (event, accountId) => {
    event.persist()
    let iconClicked = event.target.closest(".MuiTreeItem-iconContainer")
    if(!iconClicked) {
      setSelected(accountId);
    }
  };
This works perfectly, but I can't believe I just spent an hour and a half trying to get this functionality to work!

muhammada86 · 2021-09-21T20:24:51Z

here is the simple solution worked for me.

` const renderTree = (nodes) => {
return (
<StyledTreeItem
key={nodes.id}
nodeId={nodes.id}
label={
<div onClick={(e) => {

                    e.preventDefault();
                }
                }>
                    <p>{nodes.title}</p>
                </div>
            }
        >
            {Array.isArray(nodes.children)
                ? nodes.children.map((node) => renderTree(node))
                : null}
        </StyledTreeItem>
    );
};`

Prevent the default event and propogation in label on TreeItem and rest is same like

<TreeView onNodeToggle={handleToggle} expanded={expanded} defaultExpanded={[ "EC1", "EC2", "EC3", "EC4" ]} defaultCollapseIcon={<MinusSquare />} defaultExpandIcon={<PlusSquare />} defaultSelected={["EC4"]} defaultEndIcon={<CloseSquare />} > {listItem && renderTree(listItem[0])} </TreeView>

handle Toggle is
const handleToggle = (event, nodeIds) => {
setExpanded(nodeIds);
};
where the expanded is the array of parent ID's

NickEmpetvee · 2022-05-31T03:13:08Z

@mikeizzy How would your solution apply in v5.x?

awerlang · 2022-07-14T22:24:48Z

For v5.x:

<TreeItem label={<div onClick={event => event.stopPropagation()}>{label}</div>} />

alexya · 2024-03-22T07:42:33Z

@NiroSenor @flora8984461 Here is @mikeizzy solution expanded to include "only select if clicking label" functionality:
//only expand if icon was clicked
const handleToggle = (event, nodeIds) => {
    event.persist()
    let iconClicked = event.target.closest(".MuiTreeItem-iconContainer")
    if(iconClicked) {
      setExpanded(nodeIds);
    }
  };

//only select if icon wasn't clicked
  const handleSelect = (event, accountId) => {
    event.persist()
    let iconClicked = event.target.closest(".MuiTreeItem-iconContainer")
    if(!iconClicked) {
      setSelected(accountId);
    }
  };
This works perfectly, but I can't believe I just spent an hour and a half trying to get this functionality to work!

Thanks. It works. And I refactored it to meet my requirement.

  function handleNodeToggle(event: React.SyntheticEvent, nodeIds: string[]) {
    event.persist();
    const iconClicked = (event.target as any).closest(".MuiTreeItem-iconContainer");
    const isDoubleClicked = (event as any).detail === 2;
    if (iconClicked || isDoubleClicked) {
      setExpanded(nodeIds);
    }
  }

oliviertassinari added the component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! label Mar 3, 2020

tonyhallett mentioned this issue Apr 17, 2020

[TreeView] provide reason to onNodeToggle and onClick #20609

Closed

1 task

tonyhallett mentioned this issue Apr 20, 2020

[TreeView] Add onIconClick and onLabelClick #20657

Merged

1 task

eps1lon closed this as completed in #20657 Apr 27, 2020

flora8984461 mentioned this issue Aug 1, 2020

[TreeView] only to expand or collapse (onNodeToggle) when clicking on Icon but not select any particular node (onNodeSelect) #22024

Closed

1 task

joshwooding mentioned this issue Aug 6, 2020

[TreeView] Improve tree item customization #22096

Closed

4 tasks

joshwooding mentioned this issue Oct 2, 2020

[TreeView] Improve customization of tree item #22846

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TreeView] Expand/collapse node only when clicking on expand/collapse icon #19953

[TreeView] Expand/collapse node only when clicking on expand/collapse icon #19953

LaurianeDPX commented Mar 3, 2020 •

edited

MatthieuCoelho commented Mar 3, 2020

tonyhallett commented Mar 11, 2020

guicostaarantes commented Mar 19, 2020

tonyhallett commented Mar 19, 2020 •

edited

savissimo commented Mar 30, 2020

eps1lon commented Mar 30, 2020

savissimo commented Mar 30, 2020

guicostaarantes commented Apr 9, 2020 •

edited

tonyhallett commented Apr 16, 2020 •

edited

tonyhallett commented Apr 19, 2020

isrsen1 commented Apr 21, 2020

tonyhallett commented Apr 22, 2020

adamkulasiak commented May 5, 2020

turnkeyDoug commented May 6, 2020

turnkeyDoug commented May 6, 2020

NiroSenor commented May 8, 2020

mikeizzy commented May 27, 2020

NiroSenor commented May 29, 2020

mikeizzy commented May 29, 2020

NiroSenor commented Jun 5, 2020

flora8984461 commented Jul 31, 2020

cogier commented Aug 31, 2020 •

edited

Jared-Dahlke commented Sep 27, 2020 •

edited

flora8984461 commented Oct 14, 2020

mInzamamMalik commented Nov 17, 2020

mInzamamMalik commented Nov 17, 2020 •

edited

suwampy commented Jan 28, 2021

hoanvotran commented Jun 25, 2021

muhammada86 commented Sep 21, 2021 •

edited

NickEmpetvee commented May 31, 2022

awerlang commented Jul 14, 2022

alexya commented Mar 22, 2024

[TreeView] Expand/collapse node only when clicking on expand/collapse icon #19953

[TreeView] Expand/collapse node only when clicking on expand/collapse icon #19953

Comments

LaurianeDPX commented Mar 3, 2020 • edited

Summary 💡

Motivation 🔦

MatthieuCoelho commented Mar 3, 2020

tonyhallett commented Mar 11, 2020

guicostaarantes commented Mar 19, 2020

tonyhallett commented Mar 19, 2020 • edited

savissimo commented Mar 30, 2020

eps1lon commented Mar 30, 2020

savissimo commented Mar 30, 2020

guicostaarantes commented Apr 9, 2020 • edited

tonyhallett commented Apr 16, 2020 • edited

tonyhallett commented Apr 19, 2020

isrsen1 commented Apr 21, 2020

tonyhallett commented Apr 22, 2020

adamkulasiak commented May 5, 2020

turnkeyDoug commented May 6, 2020

turnkeyDoug commented May 6, 2020

NiroSenor commented May 8, 2020

mikeizzy commented May 27, 2020

NiroSenor commented May 29, 2020

mikeizzy commented May 29, 2020

NiroSenor commented Jun 5, 2020

flora8984461 commented Jul 31, 2020

cogier commented Aug 31, 2020 • edited

Jared-Dahlke commented Sep 27, 2020 • edited

flora8984461 commented Oct 14, 2020

mInzamamMalik commented Nov 17, 2020

mInzamamMalik commented Nov 17, 2020 • edited

Here is the solution I did:

Here is what I have achived for my specific usecase:

any better solution is always welcome 😊

suwampy commented Jan 28, 2021

hoanvotran commented Jun 25, 2021

muhammada86 commented Sep 21, 2021 • edited

NickEmpetvee commented May 31, 2022

awerlang commented Jul 14, 2022

alexya commented Mar 22, 2024

LaurianeDPX commented Mar 3, 2020 •

edited

tonyhallett commented Mar 19, 2020 •

edited

guicostaarantes commented Apr 9, 2020 •

edited

tonyhallett commented Apr 16, 2020 •

edited

cogier commented Aug 31, 2020 •

edited

Jared-Dahlke commented Sep 27, 2020 •

edited

mInzamamMalik commented Nov 17, 2020 •

edited

muhammada86 commented Sep 21, 2021 •

edited