Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(cdk/menu): allow for scroll strategy to be configured #29005

Merged
merged 1 commit into from
May 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/cdk/menu/context-menu-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
private _getOverlayConfig(coordinates: ContextMenuCoordinates) {
return new OverlayConfig({
positionStrategy: this._getOverlayPositionStrategy(coordinates),
scrollStrategy: this._overlay.scrollStrategies.reposition(),
scrollStrategy: this.menuScrollStrategy(),
direction: this._directionality || undefined,
});
}
Expand Down
17 changes: 16 additions & 1 deletion src/cdk/menu/menu-trigger-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,25 @@ import {
} from '@angular/core';
import {Menu} from './menu-interface';
import {MENU_STACK, MenuStack} from './menu-stack';
import {ConnectedPosition, OverlayRef} from '@angular/cdk/overlay';
import {ConnectedPosition, Overlay, OverlayRef, ScrollStrategy} from '@angular/cdk/overlay';
import {TemplatePortal} from '@angular/cdk/portal';
import {merge, Subject} from 'rxjs';

/** Injection token used for an implementation of MenuStack. */
export const MENU_TRIGGER = new InjectionToken<CdkMenuTriggerBase>('cdk-menu-trigger');

/** Injection token used to configure the behavior of the menu when the page is scrolled. */
export const MENU_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
'cdk-menu-scroll-strategy',
{
providedIn: 'root',
factory: () => {
const overlay = inject(Overlay);
return () => overlay.scrollStrategies.reposition();
},
},
);

/**
* Abstract directive that implements shared logic common to all menu triggers.
* This class can be extended to create custom menu trigger types.
Expand All @@ -46,6 +58,9 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
/** The menu stack in which this menu resides. */
protected readonly menuStack: MenuStack = inject(MENU_STACK);

/** Function used to configure the scroll strategy for the menu. */
protected readonly menuScrollStrategy = inject(MENU_SCROLL_STRATEGY);

/**
* A list of preferred menu positions to be used when constructing the
* `FlexibleConnectedPositionStrategy` for this trigger's menu.
Expand Down
2 changes: 1 addition & 1 deletion src/cdk/menu/menu-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
private _getOverlayConfig() {
return new OverlayConfig({
positionStrategy: this._getOverlayPositionStrategy(),
scrollStrategy: this._overlay.scrollStrategies.reposition(),
scrollStrategy: this.menuScrollStrategy(),
direction: this._directionality || undefined,
});
}
Expand Down
5 changes: 5 additions & 0 deletions tools/public_api_guard/cdk/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { OnDestroy } from '@angular/core';
import { Optional } from '@angular/core';
import { OverlayRef } from '@angular/cdk/overlay';
import { QueryList } from '@angular/core';
import { ScrollStrategy } from '@angular/cdk/overlay';
import { Subject } from 'rxjs';
import { TemplatePortal } from '@angular/cdk/portal';
import { TemplateRef } from '@angular/core';
Expand Down Expand Up @@ -225,6 +226,7 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
isOpen(): boolean;
menuData: unknown;
menuPosition: ConnectedPosition[];
protected readonly menuScrollStrategy: () => ScrollStrategy;
protected readonly menuStack: MenuStack;
menuTemplateRef: TemplateRef<unknown> | null;
// (undocumented)
Expand Down Expand Up @@ -296,6 +298,9 @@ export interface Menu extends MenuStackItem {
// @public
export const MENU_AIM: InjectionToken<MenuAim>;

// @public
export const MENU_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

// @public
export const MENU_STACK: InjectionToken<MenuStack>;

Expand Down