cdk overlay inside another cdk overlay

[NedaFayazi]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

I'm using Angular CDK Overlay in my project, and I've created two separate components: one for a dropdown and another for a modal. Both the modal and the dropdown are implemented using overlay.create() — not through directives. The dropdown is tied to an input element within its own component. When I click a button inside the modal, the dropdown opens as expected. However, the problem is that when I scroll the modal, the dropdown visually breaks out of the modal and appears outside its boundaries.

Any ideas on how to fix the issue will be appreciated.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

"@angular/animations": "~19.1.1",
    "@angular/cdk": "~19.1.0",
    "@angular/common": "~19.1.1",
    "@angular/compiler": "~19.1.1",
    "@angular/core": "~19.1.1",
    "@angular/forms": "~19.1.1",
    "@angular/platform-browser": "~19.1.1",
    "@angular/platform-browser-dynamic": "~19.1.1",
    "@angular/router": "~19.1.1",
    "@angular/service-worker": "~19.1.1",
    "@joint/core": "~4.1.1",
    "highcharts": "~12.1.2",
    "highlight.js": "~11.11.1",
    "pdfjs-dist": "^4.10.38",
    "rxjs": "~7.8.0",
    "swiper": "~11.2.1",
    "tslib": "~2.3.0",
    "zone.js": "~0.15.0"

Anything else?

[JoostK]

Moving to the components repo although this is a support question that is better suited for StackOverflow rather than an issue report.

[NedaFayazi]

Moving to the components repo although this is a support question that is better suited for StackOverflow rather than an issue report.
I already asked this but got no reply. If there’s any relevant documentation, please point me to it—thanks!

[JoostK]

Consider looking at scroll strategies and/or position strategies.

[NedaFayazi]

I have tried scroll strategies and position strategies. By default, Angular only listens to scroll events on the page (i.e., the body). However, if you display an overlay inside a modal or another container that has its own scrolling, Angular doesn’t automatically detect those scroll events to reposition the overlay accordingly. I think there should be a straightforward solution to this problem rather than having to write a custom OverlayContainer.

[shhdharmen]

@NedaFayazi did you try to use CloseScrollStrategy or BlockScrollStrategy?