I'm trying to create a menu that has a header that would let me select/deselect all of the items at once, but I noticed that when I use other content beside the mat-selection-list or a collection of mat-menu-item, the menu start to act weird.

If the page has a lot of content so that it show a vertical scrollbar, whenever I scroll up or down the page, a vertical scrollbar is also shown in the menu and the content gets shrinked.

I tried to reproduce the case in the demo : 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>

Is there any way I can add custom content to a mat-menu and avoid all the scrollbars or the menu being shrinked whenever I use the page vertical scrollbar?