CODEWITHSUNDEEP
angular-material2
Tobias Gassmann
Tobias Gassmann

Reputation: 11829

Disable Scrolling when angular-material select is open

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?

Upvotes: 14

Views: 26705

Answers (2)

Med Aziz CHETOUI
Med Aziz CHETOUI

Reputation: 158

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();
};

Upvotes: 2

Will Howell
Will Howell

Reputation: 3715

Since the mat-select component injects a strategy through DI, you can provide an alternative in your component (or at the module level if you wish).

import { MAT_SELECT_SCROLL_STRATEGY } from '@angular/material';
import { Overlay, BlockScrollStrategy } from '@angular/cdk/overlay';

export function scrollFactory(overlay: Overlay): () => BlockScrollStrategy {
  return () => overlay.scrollStrategies.block();
}

// ...

providers: [
  { provide: MAT_SELECT_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }
]

--

STACKBLITZ

Upvotes: 24

Related Questions