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

Author: mmalerba

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

@@ -27,6 +27,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';
@@ -239,14 +240,7 @@ export class CdkContextMenuTrigger extends MenuTrigger implements OnDestroy {
       .flexibleConnectedTo(coordinates)
       .withDefaultOffsetX(this._options?.offsetX ?? 2)
       .withDefaultOffsetY(this._options?.offsetY ?? 2)
-      .withPositions(
-        this._options?.preferredPositions ?? [
-          {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._options?.preferredPositions ?? STANDARD_DROPDOWN_BELOW_POSITIONS);
   }
 
   /**

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';
@@ -288,18 +290,8 @@ export class CdkMenuItemTrigger extends MenuTrigger implements OnDestroy {
   /** Determine and return where to position the opened menu relative to the menu item */
   private _getOverlayPositions(): ConnectedPosition[] {
     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'},
-        ];
+      ? 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/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';