Customized tree view - Material UI issue

[ayupur]

I have created a tree using "Customized tree view - material UI". However, I'm facing a challenge:
defaultEndIcon state is getting lost on accordion collapse and then expand:

Selected defaultEndIcon:

Accordion collapsed and then expanded again:

defaultEndIcon sate is lost

PFB codesandbox url:
https://codesandbox.io/s/material-demo-forked-9ovph?file=/demo.tsx

PFA codesandbox screen recording for reproducing the issue.

Screen.Recording.2021-01-11.at.4.17.07.PM.mov

[povilass]

It re-renders the endIcon component again and you lose your state if you open it again it set to the initial value. You need to save that state to your treeNode with checked attribute yourself it's not a bug.

[ayupur]

Re-rendering entire tree on expand and collapse is not a optimised approach.
If entire tree is getting re-rendered then how it is able to remember which tree item was expanded? I'm not maintaining any state for tree item expansion.

[povilass]

Your Icon is re-rendering all the time, not the tree. The tree has its own state which branch is open from the beginning even it is not rendered. Take a look at what happens when you collapse a tree item, the result is no DOM element found in HTML so where did the state go? It's stored in the root of the tree which is persisting on the top level.

Going back to your problem why you think it should store your Icon state if it renders all the time on open and close?

[ayupur]

expand and defaultEndIcon both are the properties of TreeView. I've already maintained the state of icon in TreeEndIcon file. So, that state should be preserved during expanding and collapsing. Why is the icon re-rendering on expand/collapse? This is a bug.

[ayupur]

I think collapsing accordion should only hide its inner content and show during expansion. But any of its inner content should not re-render. There is a fault in the accordion implementation.

According to me, ul.MuiCollapse-container.MuiTreeItem-group.MuiCollapse-entered { display: none } -> during collapse &
ul.MuiCollapse-container.MuiTreeItem-group.MuiCollapse-entered { display: block } -> when we expand and doing so, my icon state is not lost. I've checked this.

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[ayupur]

@oliviertassinari, there's a bug in tree view accordion which is implemented by material ui team and not by me. You will understand if you read my comments carefully.

[ayupur]

Kindly reopen it.

[povilass]

Take a look at code I added TransitionProps={{ unmountOnExit: false }} and it works as you want it. Take a look at Item docs and also why Accordion doing that docs because default TransitionProps={{ unmountOnExit: true }} for tree.

[ayupur]

@povilass, thanks a lot!!!