fix(material/menu): allow conditional inlining of menu popover

Author: adolgachev

goldens/cdk/overlay/index.api.md

@@ -439,6 +439,8 @@ export class OverlayContainer implements OnDestroy {
 
 // @public
 export interface OverlayDefaultConfig {
+    // (undocumented)
+    alwaysInline?: boolean;
     // (undocumented)
     usePopover?: boolean;
 }

src/cdk/overlay/overlay.ts

@@ -34,6 +34,7 @@ import {ScrollStrategyOptions} from './scroll/index';
 
 /** Object used to configure the default options for overlays. */
 export interface OverlayDefaultConfig {
+  alwaysInline?: boolean;
   usePopover?: boolean;
 }
 

src/material/menu/menu-trigger-base.ts

@@ -17,6 +17,7 @@ import {
   HorizontalConnectionPos,
   OverlayConfig,
   OverlayRef,
+  OVERLAY_DEFAULT_CONFIG,
   ScrollStrategy,
   VerticalConnectionPos,
 } from '@angular/cdk/overlay';
@@ -354,19 +355,24 @@ export abstract class MatMenuTriggerBase implements OnDestroy {
    * @returns OverlayConfig
    */
   private _getOverlayConfig(menu: MatMenuPanel): OverlayConfig {
+    const inline =
+      this._injector.get(OVERLAY_DEFAULT_CONFIG, null, {optional: true})?.alwaysInline ?? false;
+
     return new OverlayConfig({
       positionStrategy: createFlexibleConnectedPositionStrategy(
         this._injector,
         this._getOverlayOrigin(),
       )
         .withLockedPosition()
         .withGrowAfterOpen()
+        .withPopoverLocation(inline ? 'inline' : 'global')
         .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel'),
       backdropClass: menu.backdropClass || 'cdk-overlay-transparent-backdrop',
       panelClass: menu.overlayPanelClass,
       scrollStrategy: this._scrollStrategy(),
       direction: this._dir || 'ltr',
       disableAnimations: this._animationsDisabled,
+      usePopover: true,
     });
   }