Skip to content
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

bug(tree): Using cdk-tree with ArrayDataSource and Observable can cause expand functionality to fail under certain conditions. #29661

Open
1 task
examan opened this issue Aug 29, 2024 · 1 comment
Labels
area: material/tree needs investigation A member of the team needs to do further investigation to determine the root cause P2 The issue is important to a large percentage of users, with a workaround

Comments

@examan
Copy link

examan commented Aug 29, 2024

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

Using cdk-tree with ArrayDataSource and Observable, the expand functionality can fail under the following conditions:

  1. The Observable emits more than one value asynchronously.
  2. The emitted values are dynamically generated.
  3. trackBy is not based on identity comparison.

Reproduction

StackBlitz link: https://stackblitz.com/edit/2ypkpy?file=src%2Fexample%2Fcdk-tree-flat-children-accessor-example.ts
Steps to reproduce:
Click the tree node toggler

Expected Behavior

Child nodes expand normally.

Actual Behavior

Child nodes fail to expand.

Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 18.2.1
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 18.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, material-experimental
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@angular/cli                    18.2.1
@schematics/angular             18.2.1
rxjs                            7.4.0
typescript                      5.5.4
zone.js                         0.14.10
  • Browser(s): Edge 127.0.2651.105
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
@examan examan added the needs triage This issue needs to be triaged by the team label Aug 29, 2024
@examan examan changed the title bug(COMPONENT): Using mat-tree with ArrayDataSource and Observable can cause expand/collapse functionality to fail under certain conditions. bug(COMPONENT): Using mat-tree with ArrayDataSource and Observable can cause expand functionality to fail under certain conditions. Aug 29, 2024
@examan examan changed the title bug(COMPONENT): Using mat-tree with ArrayDataSource and Observable can cause expand functionality to fail under certain conditions. bug(tree): Using cdk-tree with ArrayDataSource and Observable can cause expand functionality to fail under certain conditions. Aug 30, 2024
@wagnermaciel
Copy link
Contributor

@BobobUnicorn Can this issue be collapsed into #29669 or should the be tracked separately?

@wagnermaciel wagnermaciel added P2 The issue is important to a large percentage of users, with a workaround needs investigation A member of the team needs to do further investigation to determine the root cause area: material/tree and removed needs triage This issue needs to be triaged by the team labels Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/tree needs investigation A member of the team needs to do further investigation to determine the root cause P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Development

No branches or pull requests

2 participants