Error scrolling scroll using (MAT-OPTION) and (MAT-AUTOCOMPLETE)

[GlauberF]

Actual Behavior

I don't know if it's a normal action, but when using mat-option together with mat-autocomplete, when scrolling with the mouse, the options present in mat-option take off in the field.
I want that even though the mouse/scroll is scrolled, the options inside mat-autocomplete remain fixed to the main component.

In the GIF below I show how it is behaving today and that I want to fix it by keeping it fixed to the component

And looking at the HTML code, it generates fixed positions and doesn't update with the scroll change

in my tests the value for top should change, however it fixes with fixed values and does not update, generating this gif effect.

Expected Behavior

keep the options(mat-option) fixed to the main component, even when scrolling the mouse

Environment

• Angular: 11.2.12
• CDK/Material: 11.2.12

[crisbeto]

The autocomplete overlay will only update when a "known" element is scrolled. By default we only listen to scroll events on the window. Can you try adding a cdkScrollable attribute to the scrollable container?

[GlauberF]

unsuccessfully

GIF

[crisbeto]

Can you also try importing the CdkScrollableModule from @angular/cdk/scrolling into the same module?

[GlauberF]

I did this, but it didn't solve the problem

[yuanyuanlife]

The same , CdkScrollableModule does not work