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

[WwwHhhYran]

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 🤔

components/src/cdk/tree/tree.ts

Lines 1093 to 1103 in 538b8bc

	} 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]

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]

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 :)