clr-tree throws ExpressionChangedAfterItHasBeenCheckedError

[nkerr]

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

The clr-tree component throws a ExpressionChangedAfterItHasBeenCheckedError since it binds the aria-multiselectable attribute to isMultiSelectable.

ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'attr.aria-multiselectable': 'false'. Current value: 'true'. Expression location: ExampleComponent component. Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (vendor.js:50832:9)
    at bindingUpdated (vendor.js:53944:9)
    at ɵɵattribute (vendor.js:53988:7)
    at ClrTree_HostBindings (vendor.js:134676:80)
    at processHostBindingOpCodes (vendor.js:51072:11)
    at refreshView (vendor.js:52687:5)
    at detectChangesInView (vendor.js:52803:5)
    at detectChangesInComponent (vendor.js:52781:3)
    at detectChangesInChildComponents (vendor.js:52815:5)
    at refreshView (vendor.js:52691:7)

How to reproduce

The bug can be easily reproduced by running your recursive tree example in stackblitz:

https://clarity.design/documentation/tree-view/code#recursive-tree

Expected behavior

An exception should not be thrown when running the recursive tree example code.

Versions

Clarity version:

• v13.x
• v15.x
• Other: 17

Framework version:
Angular 16 & 17

Device:

• Type: Windows PC
• OS: Windows 10 Pro
• Browser Chrome
• Version 128.0.6613.138

Additional notes

Add any other notes about the problem here.

[nkerr]

As a workaround for this issue you can invoke the ChangeDetectorRef in ngAterViewInit in your host component:

@Component({
  selector: 'app-my-tree',
  templateUrl: './my-tree.component.html',
  styleUrl: './my-tree.component.scss'
})
export class MyTreeComponent implements AfterViewChecked {
  ...
  ...
  constructor(private cdr: ChangeDetectorRef) {
  }
 
  ngAfterViewChecked(): void {
    this.cdr.detectChanges();
  }
...
}

[valentin-mladenov]

The fix will be available with the next v17 release.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.