Disable Scrolling when angular-material select is open

Question

By default the select-dropwon of angular-material will allow the page to scroll and reposition itself accordingly.

On the original page of the material-documentation the select-dropdown shows a differetn behaviour: it blocks scrolling when openend:

https://material.angular.io/components/select/overview

How can I achieve this behaviour? I did not find any options or switch to disable scrolling when the select is clicked

EDIT: I did find that there is a thing called "mat-select-scroll-strategy", but it is not documented anywhere. Can anybody give me a hint how to use this?

Answer 1

i had the same issue and i find the solution in GitHub Response autocomplete does not stick when scrolling

So, i rewrite the response to make it useful response and easiest way to solve problem.

1. First, we need to add an id to our input #autoCompleteInput

<input matInput #autoCompleteInput [formControl]="filter [matAutocomplete]="auto">

2. Second, we need to add in our component a ViewChild to have autoComplete as a variable

@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger })
autoComplete!: MatAutocompleteTrigger;

3. Third, we need a scrolling event

ngOnInit(): void {
    window.addEventListener('scroll', this.scrollEvent, true);
}

4. Fourth and Finally, we need a function in our component

scrollEvent = (): void => {
    if (this.autoComplete.panelOpen)
        this.autoComplete.updatePosition();
};