https://i.sstatic.net/0eS4M.gif
Having encountered a bug, I have raised an issue for it (https://github.com/angular/components/issues/20209). I am reaching out to inquire if there exists any workaround or solution known to anyone.
You can observe the problem on this demonstration page https://stackblitz.com/edit/angular-rczreu
The root of the issue lies in the CDK panel (autocomplete's panel) being displayed as a distinct layer within the demonstration, separate from the autocomplete element itself. Consequently, when the autocomplete element moves outside of the visible region within the scrollable element, the autocomplete gets hidden but the panel remains visible due to this separate layer rendering.
Illustrated in pseudo code, the angular html structure is as depicted below:
<html>
<body>
<my-app>
<my-component cdkScrollable> // This signifies a scrollable element where its children should be concealed upon scrolling
<autocomplete></autocomplete>
<some-other-child></some-other-child>
</my-component>
</my-app>
<div class="cdk-overlay-container">
// ... additional content
<div>
// The panel of the autocomplete
</div>
</div>