Mat menu height gets shrinked when scrolled out of view

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When an opened menu is scrolled out of the view, and it’s scrolled back to the view, then it should have the original height.

What is the current behavior?

When an opened menu is scrolled out of the view, and it’s scrolled back to the view, then it loses it’s original height and gets shrinked to the height of one menu-item.

What are the steps to reproduce?

1. Use the mat-menu with reposition scroll strategy (that’s the default)
2. Open mat-menu
3. If it’s opened above the menu trigger then scroll down, if it’s opened below then scroll up until you scroll the menu out of the view

Stackblitz example: I used the original mat-menu example from the angular.material.io and just slightly modified the html by adding some extra content to make it scrollable.

Just open the link and see the menu trigger on the middle of the page and do the reproduction steps. Furthermore see the attached gif below.

https://stackblitz.com/edit/angular-rnvofb-2d2zsm?file=src%2Fapp%2Fmenu-overview-example.html

What is the use-case or motivation for changing an existing behavior?

To fix the issue mentioned above

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/material ~8.2.2

Is there anything else we should know?

Tested it in chrome. Possible solution can be: (only checked it in browser console, but it worked) Call the withGrowAfterOpen(true) on the position builder when the related overlay config is retrieved for the overlay. This overlay config instantiated inside the _getOverlayConfig() function in the menu.trigger.ts.

So it would look like this:

private _getOverlayConfig(): OverlayConfig {
    return new OverlayConfig({
      positionStrategy: this._overlay.position()
          .flexibleConnectedTo(this._element)
          .withLockedPosition()
          .withGrowAfterOpen(true) // this is newly added
          .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel'),
      backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
      scrollStrategy: this._scrollStrategy(),
      direction: this._dir
    });
  }

My current temporary solution is setting the min height for the connected position overlay element (with class “cdk-overlay-connected-position-bounding-box”) to equal with it’s height after opening, but it’s quite a hack as I get this element from the DOM with getElementsByClassName.

[RandomNonameDude]

I also came across this issue and I’d appreciate the fix…

[fomenkogregory]

Any updates on this one? Or do you guys have found any workarounds? Except of closing it on scroll of course…

For me it worked what I mentioned at the end of my report, see below as well. If you set the min-height for the element equal with it’s height after opening, then it can’t shrink.

My current temporary solution is setting the min height for the connected position overlay element (with class "cdk-overlay-connected-position-bounding-box") to equal with it's height after opening, but it's quite a hack as I get this element from the DOM with getElementsByClassName.

Ty, I have found temporary solution in another issue https://github.com/angular/components/issues/13988. It has done the job for now.