Angular Material Tree duplicates tree nodes if first top level tree node has no children but other top level nodes do #29927
Description
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
Not certain, just started using Angular Material, so no experience with previous versions.
Description
I have been working with Angular Material tree version 18.2.10.
I am mocking my code after the Tree with Nested Nodes (childrenaccessor)" on the Angular Material website:
https://material.angular.io/components/tree/examples
My code matches their code exactly but if the very first top level tree node has no children but other tree nodes have children then the children get duplicated and appear as lop level nodes.
I verified this from the example link above which has a button to open it up on StackBlitz and I am able to change the array used for the tree slightly which replicates the issue.
For instance this is the datasource used in the example linked above. In the original example the top level tree node "Fruit" had children. I deleted the children and the code re-ran itself and that replicates the error.
const TREE_DATA: FoodNode[] = [
{
name: 'Fruit',
children: [],
},
{
name: 'Vegetables',
children: [
{
name: 'Green',
children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
},
{
name: 'Orange',
children: [{name: 'Pumpkins'}, {name: 'Carrots', children: [{name: 'Baby Carrots'}]}],
},
],
},
];
To duplicate this issue just go to the Angular Material Tree page linked above and find the "Tree with nested nodes (childrenAccessor)" example at the bottom of the page and click the StackBlitz link and then insert the above TREE_DATA datasource (or just delete the children from the "Fruit" node).
In the attachment to this issue being submitted is the image from the StackBlitz page for that childaccessor example I linked to above. The image shows the bug I am mentioning with duplicated nodes.
Reproduction
Go to the Angular Material Tree examples page:
https://material.angular.io/components/tree/examples
Find the second to last example: "Tree with Nested Nodes (childrenaccessor)".
Click the Stackblitz button for that example.
Change the datasource TREE_DATA so that "Fruit" has no children.
Let the page reload and open up the tree to see duplicated nodes.
Expected Behavior
I would expect not to see duplicated tree nodes that are outside of the hierarchical tree node level that they should be on.
I would expect the tree to look normal with no duplicated tree nodes. When loaded the tree's node structure shown on the webpage should match the structure from the datasource.
Actual Behavior
Duplicated node throughout the tree.
Environment
- Angular Material: 18.2.0
- CDK/Material: 18.2.10
- Browser(s): Firefox, Chrome, Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows