bug(CdkTree): Clicking on nested tree nodes collapses parent tree node

[cfinlinson-incomm]

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

Angular CDK 17

Description

When using cdk-nested-tree-node, if I click on a child/leaf node, it collapses the parent tree node.

This does not occur when using cdk-tree-node; presumably, DOM click events are bubbling up and unexpectedly being handled by parent nodes. This was not happening on Angular CDK 17.

Reproduction

StackBlitz link: Angular components docs: https://material.angular.io/cdk/tree/examples#cdk-tree-nested-level-accessor
Steps to reproduce:

1. Click on a parent node (e.g. "Fruit")
2. Click on a nested child node (e.g. "Apple")

Expected Behavior

I would expect the nodes to be expanded or collapsed only when I click an element with the cdkTreeNodeToggle directive. But it seems to expand/collapse whenever I click anywhere in the sub-DOM of the cdk-nested-tree-node, including child nodes.

Actual Behavior

Clicking on child nodes collapses the parent node. Also, clicking on a part of the node that is not the cdkTreeNodeToggle collapses the node.

Environment

• Angular: 17
• CDK/Material: 17
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

Looks like this was a docs issue. You can see how I've fixed it in #29875, if you want to fix it in your app.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}