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