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

[goetzrobin]

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: https://github.com/angular/components/blob/e2bfb91e220b5adc6f112aa066b113470b90bfef/src/material/menu/menu-trigger.ts#L269

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,
    });
  }

https://github.com/angular/components/blob/e2bfb91e220b5adc6f112aa066b113470b90bfef/src/cdk/menu/menu-trigger.ts#L252

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: https://github.com/goetzrobin/spartan/issues/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!

[t1m4lc]

You can use the cdk overlay until it's available

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}