isFolder property is always true for child items when parent.isExpanded == false #166
Description
Describe the bug
When rendering a nested tree, if the TreeItem component always renders its children (when item.isExpanded() is false), the isFolder property of child items is always true. This is incorrect: leaf nodes should not be marked as folders.
endering children regardless of isExpanded is necessary for implementing expand/collapse animations (e.g., with Material UI's <Collapse> component). The typical pattern is to keep the child elements mounted for animation purposes, and unmount them after collapsed animation is done.
To Reproduce
- Open the sandbox: https://codesandbox.io/p/devbox/mre-headlesstree-getitemdata-setstate-issue-forked-3hkn3j?workspaceId=ws_LFCUAYD9gBTdMJ7CyS3vBj
- Click the "Normal State" button (if it is not already active). In this mode, TreeItem only renders children when
item.isExpandedis true. - Expand any tree item. When you reach the third level, leaf elements have the correct white background (folders are green, leaves are white), and leaf nodes do not show a chevron. This is correct.
- Click the "Force Expand" button. Now, TreeItem always renders children, ignoring
item.isExpanded. - Expand any tree item. At the third level, leaf elements incorrectly have a green background and show a chevron, indicating they are folders. This is incorrect.
Expected behavior
Leaf nodes should have isFolder to be false regardless of parent's isExpanded state. The background color and chevron should reflect the correct folder/leaf status.
Screenshots
(attached in "To Reproduce" section)
Additional context
- Version of the Library: This happens on both v1.5.0 (latest when this issue is created) and older v1.4.0
Why is this practice intended and correct?
Rendering children regardless of item.isExpanded() is a necessary and valid approach for implementing expand/collapse animations in tree UIs. Animation libraries and UI frameworks (such as Material UI's <Collapse>) require child elements to remain mounted in the DOM to animate their entry and exit smoothly. If children are conditionally unmounted based solely on isExpanded, it becomes impossible to animate the collapse transition, resulting in a poor user experience.
This pattern is widely used and recommended for animated tree components. The bug described is not caused by a misuse of the API, but rather by the library incorrectly marking all child items as folders when their parent always renders children. The correct behavior should be that leaf nodes retain their isFolder: false status, regardless of how their parent renders them.
This is not a pseudo-requirement or a workaround; it is a standard and necessary practice for modern, animated tree UIs. The issue affects real-world use cases and should be addressed to ensure compatibility with animation-driven rendering patterns.