Skip to content

bug(cdk-tree): cdk tree with levelAccessor only renders all nodes and cant render based on the expanded state #30735

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task done
WwwHhhYran opened this issue Mar 28, 2025 · 2 comments · May be fixed by #31039
Open
1 task done
Labels
area: cdk/tree P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@WwwHhhYran
Copy link

WwwHhhYran commented Mar 28, 2025

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The tree with levelAccessor and flat data can only render all nodes, and when I click on the cdkTreeNodeToggle component, it still only renders all nodes, and does not have the effect of expanding and collapsing nodes.

However, when I use tree with childrenAccessor and nested data, it will render specific nodes based on the tree expansion.

For example, for the follwing node structure:

- parent 1
   - leaf 1-1
   - leaf 1-2

- parent 2
   - leaf 2-1
   - leaf 2-2

Demo 1 👇

When I use levelAccessor with flat type node data passed in, it will always show the above structure, no matter if I click to collapse parent 1 or parent 2 or not, it will still be the same.

link: https://stackblitz.com/edit/9hcrkwh5-mpxvoif7?file=src%2Fexample%2Fcdk-tree-flat-level-accessor-example.ts

Demo 2 👇

When I use childrenAccessor with nested node data passed in, it can dynamically render the nodes based on the expanded and collapsed state. For example, when I click to collapse parent 1, the structure of the tree view is re-rendered as:

- parent 1

- parent 2
   - leaf 2-1
   - leaf 2-2

link: https://stackblitz.com/edit/qfnq49si-ubbjqylv?file=src%2Fexample%2Fcdk-tree-flat-children-accessor-example.ts

Extra 📝

Although I see that the official demo hides nodes that don't need to be displayed by a combination of style.display and shouldRender.

I think this is still a problem. Because in Demo 1 you have to use style.display and shouldRender to render correctly, while in Demo 2 you can render correctly without them.

So I think there is a difference in this behaviour that is problematic.

The same problem exists for TreeControl, but we can pass only specific node data into the tree's dataStream based on the treeControl's record of the node's isExpanded status.

Possible problem location 🤔

} else if (nodeType === 'flat') {
// In the case of a TreeControl, we know that the node type matches up
// with the TreeControl, and so no conversions are necessary. Otherwise,
// we've already confirmed that the data model matches up with the
// desired node type here.
return observableOf({renderNodes: nodes, flattenedNodes: nodes}).pipe(
tap(({flattenedNodes}) => {
this._calculateParents(flattenedNodes);
}),
);
} else {

The flattenedNodes and renderNodes are both equal to nodes,maybe we should create a method like shouldRender that determines which nodes should be rendered and assigns them to renderNodes?

Reproduction

see Desciption

Expected Behavior

Correctly render visible nodes in the tree when expanding or collapsing nodes

Actual Behavior

When use levelAccessor with flat data, can not render visible nodes in the tree correctly when expanding or collapsing nodes. But use childrenAccessor with nested data, correctly.

Environment

  • Angular: 19.2.0
  • CDK/Material: 19.2.0
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
@WwwHhhYran WwwHhhYran added the needs triage This issue needs to be triaged by the team label Mar 28, 2025
@WwwHhhYran
Copy link
Author

WwwHhhYran commented Mar 28, 2025

Excuse me, I find that you guys are the developers who maintain and refactor the cdk-tree component, and I am hoping you could help me confirm if this is a bug or not ! @crisbeto @BobobUnicorn

If this is a bug, I'm happy to fix it and submit a pull request for our repository ! 👀

@WwwHhhYran WwwHhhYran changed the title bug(cdk-tree): tree with levelAccessor only renders all nodes bug(cdk-tree): cdk tree with levelAccessor only renders all nodes and cant render based on the expanded state Mar 30, 2025
@WwwHhhYran
Copy link
Author

Our component library is based on this project for secondary development, and I am hoping someone could help me confirm if this is a bug so we can adjust accordingly :)

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: cdk/tree and removed needs triage This issue needs to be triaged by the team labels May 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: cdk/tree P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
3 participants
@crisbeto @WwwHhhYran and others