Estoy tratando de crear un menú que tenga un encabezado que me permita seleccionar/deseleccionar todos los elementos a la vez, pero noté que cuando uso otro contenido además de mat-selection-list o una colección de mat-menu- ítem, el menú comienza a actuar de forma extraña.

Si la página tiene mucho contenido y muestra una barra de desplazamiento vertical, cada vez que me desplazo hacia arriba o hacia abajo en la página, también se muestra una barra de desplazamiento vertical en el menú y el contenido se reduce.

Traté de reproducir el caso en la demostración: https://stackblitz.com/edit/angular-y1kd1u?file=src/app/menu-position-example.ts .

 <button mat-button [matMenuTriggerFor]="beforeMenu">Before</button> <mat-menu #beforeMenu="matMenu" xPosition="before"> <ng-template matMenuContent> <div (click)="$event.stopPropagation();"> <div class="checkbox-header"> <mat-checkbox>Select ALL</mat-checkbox> </div> <mat-selection-list #shoes> <mat-list-option checkboxPosition="before" *ngFor="let shoe of typesOfShoes"> {{shoe}} </mat-list-option> </mat-selection-list> </div> </ng-template> </mat-menu> <p>A lot of text .....</p>

¿Hay alguna forma en que pueda agregar contenido personalizado a un menú mat y evitar que todas las barras de desplazamiento o el menú se reduzcan cada vez que uso la barra de desplazamiento vertical de la página?