bug(CdkVirtualScrollViewport): "CdkVirtualScrollViewport is already attached" error appears when using nested virtual scroll

[Malinxwski]

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

17.0.0

Description

"CdkVirtualScrollViewport is already attached" error appears when using virtual scroll inside another virtual scroll.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-hrzgjwqz?file=src%2Fmain.ts
Steps to reproduce:

1. Focus on input field (autocomplete component)
2. Check console to see the error

Expected Behavior

CdkVirtualScrollViewports do not conflict with each other when nested virtual scroll is used.

Actual Behavior

Nested virtual scroll not working.

Environment

Angular CLI: 18.2.12
Node: 22.0.0
Package Manager: npm 10.5.1
OS: darwin arm64

Angular: 18.2.13
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package Version

@angular-devkit/architect 0.1802.12
@angular-devkit/build-angular 18.2.12
@angular-devkit/core 18.2.12
@angular-devkit/schematics 18.2.12
@angular/cdk 18.2.14
@angular/cli 18.2.12
@schematics/angular 18.2.12
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.10

Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 YaBrowser/24.10.0.0 Safari/537.36

[crisbeto]

Closing since there's a different error being thrown before the CDK one:

ERROR RuntimeError: NG05105: Unexpected synthetic property @tuiFadeIn found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@tuiFadeIn` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
    at checkNoSyntheticProp (main.js:28147:11)
    at EmulatedEncapsulationDomRenderer2.setProperty (main.js:28115:86)
    at elementPropertyInternal (main.js:9889:14)
    at ɵɵproperty (main.js:15055:5)
    at TuiScrollControls_ng_template_1_ng_container_0_div_1_Template (main.js:43839:5)
    at executeTemplate (main.js:9606:5)
    at refreshView (main.js:10643:7)
    at detectChangesInView (main.js:10807:5)
    at detectChangesInViewIfAttached (main.js:10790:3)
    at detectChangesInEmbeddedViews (main.js:10766:7)

Furthermore, this is using a bunch of components not in our library. We can investigate if there's a narrower repro.