feat(cdk-experimental/menu): allow configuration of typeahead and menu position (#24600)

* feat(cdk-experimental/menu): allow configuration of typeahead and menu position

Addresses several TODOs that were left after the original implementation

* fixup! feat(cdk-experimental/menu): allow configuration of typeahead and menu position

* fixup! feat(cdk-experimental/menu): allow configuration of typeahead and menu position

Author: mmalerba

src/cdk-experimental/menu/context-menu.ts

@@ -11,7 +11,6 @@ import {
   EventEmitter,
   Inject,
   Injectable,
-  InjectionToken,
   Injector,
   Input,
   OnDestroy,
@@ -27,6 +26,7 @@ import {
   Overlay,
   OverlayConfig,
   OverlayRef,
+  STANDARD_DROPDOWN_BELOW_POSITIONS,
 } from '@angular/cdk/overlay';
 import {Portal, TemplatePortal} from '@angular/cdk/portal';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
@@ -36,6 +36,14 @@ import {MENU_STACK, MenuStack} from './menu-stack';
 import {isClickInsideMenuOverlay} from './menu-item-trigger';
 import {MENU_TRIGGER, MenuTrigger} from './menu-trigger';
 
+// In cases where the first menu item in the context menu is a trigger the submenu opens on a
+// hover event. We offset the context menu 2px by default to prevent this from occurring.
+const CONTEXT_MENU_POSITIONS = STANDARD_DROPDOWN_BELOW_POSITIONS.map(position => {
+  const offsetX = position.overlayX === 'start' ? 2 : -2;
+  const offsetY = position.overlayY === 'top' ? 2 : -2;
+  return {...position, offsetX, offsetY};
+});
+
 /** Tracks the last open context menu trigger across the entire application. */
 @Injectable({providedIn: 'root'})
 export class ContextMenuTracker {
@@ -54,20 +62,6 @@ export class ContextMenuTracker {
   }
 }
 
-/** Configuration options passed to the context menu. */
-export type ContextMenuOptions = {
-  /** The opened menus X coordinate offset from the triggering position. */
-  offsetX: number;
-
-  /** The opened menus Y coordinate offset from the triggering position. */
-  offsetY: number;
-};
-
-/** Injection token for the ContextMenu options object. */
-export const CDK_CONTEXT_MENU_DEFAULT_OPTIONS = new InjectionToken<ContextMenuOptions>(
-  'cdk-context-menu-default-options',
-);
-
 /** The coordinates of where the context menu should open. */
 export type ContextMenuCoordinates = {x: number; y: number};
 
@@ -83,9 +77,6 @@ export type ContextMenuCoordinates = {x: number; y: number};
     '(contextmenu)': '_openOnContextMenu($event)',
   },
   providers: [
-    // In cases where the first menu item in the context menu is a trigger the submenu opens on a
-    // hover event. Offsetting the opened context menu by 2px prevents this from occurring.
-    {provide: CDK_CONTEXT_MENU_DEFAULT_OPTIONS, useValue: {offsetX: 2, offsetY: 2}},
     {provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger},
     {provide: MENU_STACK, useClass: MenuStack},
   ],
@@ -95,6 +86,9 @@ export class CdkContextMenuTrigger extends MenuTrigger implements OnDestroy {
   @Input('cdkContextMenuTriggerFor')
   private _menuTemplateRef: TemplateRef<unknown>;
 
+  /** A list of preferred menu positions to be used when constructing the `FlexibleConnectedPositionStrategy` for this trigger's menu. */
+  @Input('cdkMenuPosition') menuPosition: ConnectedPosition[];
+
   /** Emits when the attached menu is requested to open. */
   @Output('cdkContextMenuOpened') readonly opened: EventEmitter<void> = new EventEmitter();
 
@@ -129,7 +123,6 @@ export class CdkContextMenuTrigger extends MenuTrigger implements OnDestroy {
     private readonly _overlay: Overlay,
     private readonly _contextMenuTracker: ContextMenuTracker,
     @Inject(MENU_STACK) menuStack: MenuStack,
-    @Inject(CDK_CONTEXT_MENU_DEFAULT_OPTIONS) private readonly _options: ContextMenuOptions,
     @Optional() private readonly _directionality?: Directionality,
   ) {
     super(injector, menuStack);
@@ -233,22 +226,7 @@ export class CdkContextMenuTrigger extends MenuTrigger implements OnDestroy {
     return this._overlay
       .position()
       .flexibleConnectedTo(coordinates)
-      .withDefaultOffsetX(this._options.offsetX)
-      .withDefaultOffsetY(this._options.offsetY)
-      .withPositions(this._getOverlayPositions());
-  }
-
-  /**
-   * Determine and return where to position the opened menu relative to the mouse location.
-   */
-  private _getOverlayPositions(): ConnectedPosition[] {
-    // TODO: this should be configurable through the injected context menu options
-    return [
-      {originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top'},
-      {originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top'},
-      {originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom'},
-      {originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom'},
-    ];
+      .withPositions(this.menuPosition ?? CONTEXT_MENU_POSITIONS);
   }
 
   /**

src/cdk-experimental/menu/menu-item-trigger.spec.ts

@@ -539,7 +539,6 @@ class TriggersWithSameMenuSameMenuBar {
   @ViewChildren(CdkMenu) menus: QueryList<CdkMenu>;
 }
 
-// TODO uncomment once we figure out why this is failing in Ivy
 @Component({
   template: `
     <div cdkMenuBar>

src/cdk-experimental/menu/menu-item-trigger.ts

@@ -29,6 +29,8 @@ import {
   Overlay,
   OverlayConfig,
   OverlayRef,
+  STANDARD_DROPDOWN_ADJACENT_POSITIONS,
+  STANDARD_DROPDOWN_BELOW_POSITIONS,
 } from '@angular/cdk/overlay';
 import {DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, UP_ARROW} from '@angular/cdk/keycodes';
 import {fromEvent, merge, Subject} from 'rxjs';
@@ -90,6 +92,9 @@ export class CdkMenuItemTrigger extends MenuTrigger implements OnDestroy {
   @Input('cdkMenuTriggerFor')
   _menuTemplateRef?: TemplateRef<unknown>;
 
+  /** A list of preferred menu positions to be used when constructing the `FlexibleConnectedPositionStrategy` for this trigger's menu. */
+  @Input('cdkMenuPosition') menuPosition: ConnectedPosition[];
+
   /** Emits when the attached menu is requested to open */
   @Output('cdkMenuOpened') readonly opened: EventEmitter<void> = new EventEmitter();
 
@@ -287,20 +292,12 @@ export class CdkMenuItemTrigger extends MenuTrigger implements OnDestroy {
 
   /** Determine and return where to position the opened menu relative to the menu item */
   private _getOverlayPositions(): ConnectedPosition[] {
-    // TODO: use a common positioning config from (possibly) cdk/overlay
-    return !this._parentMenu || this._parentMenu.orientation === 'horizontal'
-      ? [
-          {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
-          {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'},
-          {originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top'},
-          {originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom'},
-        ]
-      : [
-          {originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top'},
-          {originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom'},
-          {originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top'},
-          {originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom'},
-        ];
+    return (
+      this.menuPosition ??
+      (!this._parentMenu || this._parentMenu.orientation === 'horizontal'
+        ? STANDARD_DROPDOWN_BELOW_POSITIONS
+        : STANDARD_DROPDOWN_ADJACENT_POSITIONS)
+    );
   }
 
   /**

src/cdk-experimental/menu/menu-item.spec.ts

@@ -90,6 +90,7 @@ describe('MenuItem', () => {
       fixture.detectChanges();
 
       menuItem = fixture.debugElement.query(By.directive(CdkMenuItem)).injector.get(CdkMenuItem);
+      return fixture;
     }
 
     it('should get the text for a simple menu item with no nested or wrapped elements', () => {
@@ -98,15 +99,21 @@ describe('MenuItem', () => {
     });
 
     it('should get the text for menu item with a single nested mat icon component', () => {
-      createComponent(MenuItemWithIcon);
+      const fixture = createComponent(MenuItemWithIcon);
+      expect(menuItem.getLabel()).toEqual('unicorn Click me!');
+      fixture.componentInstance.typeahead = 'Click me!';
+      fixture.detectChanges();
       expect(menuItem.getLabel()).toEqual('Click me!');
     });
 
     it(
       'should get the text for menu item with single nested component with the material ' +
         'icon class',
       () => {
-        createComponent(MenuItemWithIconClass);
+        const fixture = createComponent(MenuItemWithIconClass);
+        expect(menuItem.getLabel()).toEqual('unicorn Click me!');
+        fixture.componentInstance.typeahead = 'Click me!';
+        fixture.detectChanges();
         expect(menuItem.getLabel()).toEqual('Click me!');
       },
     );
@@ -120,7 +127,10 @@ describe('MenuItem', () => {
       'should get the text for a menu item with nested icon, nested icon class and nested ' +
         'wrapping elements',
       () => {
-        createComponent(MenuItemWithMultipleNestings);
+        const fixture = createComponent(MenuItemWithMultipleNestings);
+        expect(menuItem.getLabel()).toEqual('unicorn Click menume!');
+        fixture.componentInstance.typeahead = 'Click me!';
+        fixture.detectChanges();
         expect(menuItem.getLabel()).toEqual('Click me!');
       },
     );
@@ -134,22 +144,27 @@ class SingleMenuItem {}
 
 @Component({
   template: `
-    <button cdkMenuItem>
+    <button cdkMenuItem [typeahead]="typeahead">
       <mat-icon>unicorn</mat-icon>
       Click me!
     </button>
   `,
 })
-class MenuItemWithIcon {}
+class MenuItemWithIcon {
+  typeahead: string;
+}
+
 @Component({
   template: `
-    <button cdkMenuItem>
+    <button cdkMenuItem [typeahead]="typeahead">
       <div class="material-icons">unicorn</div>
       Click me!
     </button>
   `,
 })
-class MenuItemWithIconClass {}
+class MenuItemWithIconClass {
+  typeahead: string;
+}
 
 @Component({
   template: ` <button cdkMenuItem><b>Click</b> me!</button> `,
@@ -158,7 +173,7 @@ class MenuItemWithBoldElement {}
 
 @Component({
   template: `
-    <button cdkMenuItem>
+    <button cdkMenuItem [typeahead]="typeahead">
       <div>
         <div class="material-icons">unicorn</div>
         <div>
@@ -170,7 +185,9 @@ class MenuItemWithBoldElement {}
     </button>
   `,
 })
-class MenuItemWithMultipleNestings {}
+class MenuItemWithMultipleNestings {
+  typeahead: string;
+}
 
 @Component({
   selector: 'mat-icon',

src/cdk-experimental/menu/menu-item.ts

@@ -30,14 +30,6 @@ import {FocusNext, MENU_STACK, MenuStack} from './menu-stack';
 import {FocusableElement} from './pointer-focus-tracker';
 import {MENU_AIM, MenuAim, Toggler} from './menu-aim';
 
-// TODO refactor this to be configurable allowing for custom elements to be removed
-/** Removes all icons from within the given element. */
-function removeIcons(element: Element) {
-  for (const icon of Array.from(element.querySelectorAll('mat-icon, .material-icons'))) {
-    icon.remove();
-  }
-}
-
 /**
  * Directive which provides the ability for an element to be focused and navigated to using the
  * keyboard when residing in a CdkMenu, CdkMenuBar, or CdkMenuGroup. It performs user defined
@@ -71,6 +63,12 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
   }
   private _disabled = false;
 
+  /**
+   * The text used to locate this item during menu typeahead. If not specified,
+   * the `textContent` of the item will be used.
+   */
+  @Input() typeahead: string;
+
   /**
    * If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse
    * event.
@@ -173,12 +171,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
 
   /** Get the label for this element which is required by the FocusableOption interface. */
   getLabel(): string {
-    // TODO cloning the tree may be expensive; implement a better method
-    // we know that the current node is an element type
-    const clone = this._elementRef.nativeElement.cloneNode(true) as Element;
-    removeIcons(clone);
-
-    return clone.textContent?.trim() || '';
+    return this.typeahead || this._elementRef.nativeElement.textContent?.trim() || '';
   }
 
   /**

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -1288,3 +1288,17 @@ function getRoundedBoundingClientRect(clientRect: Dimensions): Dimensions {
     height: Math.floor(clientRect.height),
   };
 }
+
+export const STANDARD_DROPDOWN_BELOW_POSITIONS: ConnectedPosition[] = [
+  {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
+  {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'},
+  {originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top'},
+  {originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom'},
+];
+
+export const STANDARD_DROPDOWN_ADJACENT_POSITIONS: ConnectedPosition[] = [
+  {originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top'},
+  {originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom'},
+  {originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top'},
+  {originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom'},
+];

src/cdk/overlay/public-api.ts

@@ -27,4 +27,6 @@ export {
   ConnectedPosition,
   FlexibleConnectedPositionStrategy,
   FlexibleConnectedPositionStrategyOrigin,
+  STANDARD_DROPDOWN_ADJACENT_POSITIONS,
+  STANDARD_DROPDOWN_BELOW_POSITIONS,
 } from './position/flexible-connected-position-strategy';

src/dev-app/cdk-experimental-menu/cdk-menu-demo.css

@@ -17,3 +17,8 @@
   border: solid 2px black;
   padding: 6px;
 }
+
+demo-custom-position {
+  display: block;
+  margin-top: 20px;
+}

src/dev-app/cdk-experimental-menu/cdk-menu-demo.html

@@ -99,19 +99,55 @@ <h4>Inner Context</h4>
       wampa darth mara. Lando kessel wampa sidious.
     </div>
   </div>
+</div>
+
+<div class="example-menu-container">
+  <h3>Custom Menu Position Example</h3>
+  <p>The menu and context menu below should open centered on the trigger</p>
+
+  <p><button [cdkMenuTriggerFor]="someMenu" [cdkMenuPosition]="customPosition">Some Menu</button></p>
+
+  <div class="example-context" [cdkContextMenuTriggerFor]="outer" [cdkMenuPosition]="customPosition">
+    <h4>Custom Context Menu Position (Centered on Cursor)</h4>
+
+    Lucas ipsum dolor sit amet maul jade jawa ben wookiee binks lando jinn baba tatooine. Jade biggs
+    padmé sebulba cade dagobah. Baba lars mothma yoda. Bothan calrissian c-3p0 maul fisto lando
+    obi-wan. Skywalker solo darth bothan droid obi-wan ahsoka. Maul solo obi-wan calrissian antilles
+    yavin chewbacca lando. Mustafar ponda kit jango. C-3p0 skywalker baba grievous moff. Hutt ben
+    darth solo skywalker bothan skywalker maul organa. Grievous cade antilles utapau skywalker
+    grievous antilles chewbacca.
+  </div>
+
+  <ng-template #someMenu>
+    <div cdkMenu class="example-menu">
+      <button cdkMenuItem>Some Option 1</button>
+      <button cdkMenuItem [cdkMenuTriggerFor]="someSubMenu">Some Option 2 ></button>
+      <button cdkMenuItem>Some Option 3</button>
+      <button cdkMenuItem>Some Option 4</button>
+    </div>
+  </ng-template>
+
+  <ng-template #someSubMenu>
+    <div cdkMenu class="example-menu">
+      <button cdkMenuItem>Some Option 1</button>
+      <button cdkMenuItem>Some Option 2</button>
+      <button cdkMenuItem>Some Option 3</button>
+      <button cdkMenuItem>Some Option 4</button>
+    </div>
+  </ng-template>
 
   <ng-template #outer>
     <div cdkMenu class="example-menu" id="outer_menu">
-      <button id="undo_button" cdkMenuItem>Undo</button>
-      <button id="redo_button" cdkMenuItem>Redo</button>
+      <button cdkMenuItem>Undo</button>
+      <button cdkMenuItem>Redo</button>
     </div>
   </ng-template>
 
   <ng-template #inner>
     <div cdkMenu class="example-menu" id="inner_menu">
-      <button id="cut_button" cdkMenuItem>Cut</button>
-      <button id="copy_button" cdkMenuItem>Copy</button>
-      <button id="paste_button" cdkMenuItem>Paste</button>
+      <button cdkMenuItem>Cut</button>
+      <button cdkMenuItem>Copy</button>
+      <button cdkMenuItem>Paste</button>
     </div>
   </ng-template>
 </div>