diff --git a/goldens/cdk/overlay/index.api.md b/goldens/cdk/overlay/index.api.md index 5f83c88501c8..677581853e72 100644 --- a/goldens/cdk/overlay/index.api.md +++ b/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; } diff --git a/src/cdk/overlay/overlay.ts b/src/cdk/overlay/overlay.ts index c55886c67ea5..8bfc02024d0b 100644 --- a/src/cdk/overlay/overlay.ts +++ b/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; } diff --git a/src/material/menu/menu-trigger-base.ts b/src/material/menu/menu-trigger-base.ts index 32006cd59702..7bc54ec069a8 100644 --- a/src/material/menu/menu-trigger-base.ts +++ b/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,6 +355,9 @@ 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, @@ -361,12 +365,14 @@ export abstract class MatMenuTriggerBase implements OnDestroy { ) .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, }); }