I'm using Angular CDK Overlay in my project. I have a modal, and inside this modal, there’s an input field. When I click on that input, a dropdown opens. The dropdown is connected to the input within its own component using overlay.create(). The problem is: When I scroll the modal, the dropdown breaks out of the modal and appears outside of it, visually escaping its boundaries. I know that withScrollableContainers() in the position strategy should help prevent the dropdown from escaping the scrollable container, but no matter what I try, it doesn't work as expected. To clarify: Both the modal and the dropdown overlays are created using overlay.create() — not directives. But the dropdown still does not stay within the modal when scrolling. Any ideas on how to make withScrollableContainers() work properly or alternative solutions would be appreciated. Continue reading...
