CDK-Tree (FlatTree docs) - Collapsing doesn't collapse descendants

[avrahamkam]

Reproduction

The docs: https://material.angular.io/cdk/tree/overview#flat-tree
https://stackblitz.com/angular/ggqypydxrvv?file=src%2Fapp%2Fcdk-tree-flat-example.ts

(This issue doesn't effect MatTree).

Steps to reproduce:

1. Expand Vegetables
2. Expand Orange (to see Pumpkin and Carrots)
3. Collapse Vegetables

This is the expanded view:

Expected Behavior

Pumpkin and Carrots will be hidden

Actual Behavior

Orange is hidden but Pumpkin and Carrots are visible

Environment

• Angular: ^8.3.8,
• Material: ~8.2.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Mac

Update

It seems that at the moment that treeControl.toggle is being called for both expand and collapse (because the cdkTreeNodeToggle is being used). Ideally, it should be using the treeControl.collapseDescendants method for collapse, and the treeControl.expand method for expand.

Stackblitz with proposed fix for the example in the docs:
https://stackblitz.com/edit/angular-d8rm6r?embed=1&file=src/app/cdk-tree-flat-example.ts

I've intentionally made use of the treeControl class instead of directly updating the node.isExpanded attribute.

[andyb-esdm]

The shouldRender method should be something like this:

shouldRender(node: ExampleFlatNode) {
   let parent = this.getParentNode(node);
   while (parent) {
       if (!parent.isExpanded) {
           return false;
       }
      parent = this.getParentNode(parent);
   }
   return true;
}

[harshilparmar]

Can I try this?

[CristhianParra]

Looks like this was already solved, since the error it's no longer happening in the docs page

[avrahamkam]

As @CristhianParra pointed out, this is no longer an issue.

[andyb-esdm]

Glad it's fixed. Thanks.