angular / components

Feature Description

I'd like to change the scroll strategy of a cdk menu to lock the screen instead of repositioning it.
This is possible in Material by providing a custom MAT_MENU_SCROLL_STRATEGY injection token.

/** Injection token that determines the scroll handling while the menu is open. */
export const MAT_MENU_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
  'mat-menu-scroll-strategy',
  {
    providedIn: 'root',
    factory: () => {
      const overlay = inject(Overlay);
      return () => overlay.scrollStrategies.reposition();
    },
  },
);

/** @docs-private */
export function MAT_MENU_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {
  return () => overlay.scrollStrategies.reposition();
}

/** @docs-private */
export const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  provide: MAT_MENU_SCROLL_STRATEGY,
  deps: [Overlay],
  useFactory: MAT_MENU_SCROLL_STRATEGY_FACTORY,
};

The customizable scrollStrategy is then provided through DI in the constructor:

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

Line 269 in e2bfb91

this._scrollStrategy = scrollStrategy;

However, in the cdk version of the menu the scroll strategy is hard coded and does not allow for any customization:

  /** Get the configuration object used to create the overlay. */
  private _getOverlayConfig() {
    return new OverlayConfig({
      positionStrategy: this._getOverlayPositionStrategy(),
      scrollStrategy: this._overlay.scrollStrategies.reposition(),
      direction: this._directionality || undefined,
    });
  }

components/src/cdk/menu/menu-trigger.ts

Line 252 in e2bfb91

scrollStrategy: this._overlay.scrollStrategies.reposition(),

Use Case

I am building a component library on top of the Angular CDK. I'd love to allow users to choose if they'd like to lock scrolling upon opening of a dropdown menu like the default of Angular Material's Menu: https://material.angular.io/components/menu/overview
Or keep the repositioning strategy that is currently the only option for the CDK.
I am specifically trying to implement this request from one of my users: goetzrobin/spartan#277

I think Angular Material supporting a custom strategy and the CDK not supporting a strategy is confusing to a lot of end users and I'd love for both to be customizable!

You can use the cdk overlay until it's available

feat(cdk/menu): allow user to configure scroll strategy on menu triggers

Feature Description

Use Case