fix(menu): throw error if menu contains its own trigger (#19943)

If the consumer puts a trigger inside a menu and passes the menu back to the trigger, we'll go into an infinite loop and throw a cryptic error message. These changes detect such a case and throw a better error. Example of a case that will be flagged:

```
<mat-menu #menu="matMenu">
  <button [matMenuTriggerFor]="menu"></button>
</mat-menu>
```

Fixes #19941.

(cherry picked from commit 1b7ba0b)

Author: crisbeto

src/material-experimental/mdc-menu/menu.spec.ts

@@ -712,6 +712,13 @@ describe('MDC-based MatMenu', () => {
     }).toThrowError(/must pass in an mat-menu instance/);
   });
 
+  it('should throw if assigning a menu that contains the trigger', () => {
+    expect(() => {
+      const fixture = createComponent(InvalidRecursiveMenu, [], [FakeIcon]);
+      fixture.detectChanges();
+    }).toThrowError(/menu cannot contain its own trigger/);
+  });
+
   it('should be able to swap out a menu after the first time it is opened', fakeAsync(() => {
     const fixture = createComponent(DynamicPanelMenu);
     fixture.detectChanges();
@@ -2579,3 +2586,14 @@ class SimpleMenuWithRepeaterInLazyContent {
   @ViewChild(MatMenu, {static: false}) menu: MatMenu;
   items = [{label: 'Pizza', disabled: false}, {label: 'Pasta', disabled: false}];
 }
+
+
+@Component({
+  template: `
+    <mat-menu #menu="matMenu">
+      <button [matMenuTriggerFor]="menu"></button>
+    </mat-menu>
+  `
+})
+class InvalidRecursiveMenu {
+}

src/material/menu/menu-errors.ts

@@ -37,3 +37,14 @@ export function throwMatMenuInvalidPositionY() {
   throw Error(`yPosition value must be either 'above' or below'.
       Example: <mat-menu yPosition="above" #menu="matMenu"></mat-menu>`);
 }
+
+
+/**
+ * Throws an exception for the case when a menu is assigned
+ * to a trigger that is placed inside the same menu.
+ * @docs-private
+ */
+export function throwMatMenuRecursiveError() {
+  throw Error(`matMenuTriggerFor: menu cannot contain its own trigger. Assign a menu that is ` +
+              `not a parent of the trigger or move the trigger outside of the menu.`);
+}

src/material/menu/menu-trigger.ts

@@ -32,12 +32,13 @@ import {
   Output,
   Self,
   ViewContainerRef,
+  isDevMode,
 } from '@angular/core';
 import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {asapScheduler, merge, of as observableOf, Subscription} from 'rxjs';
 import {delay, filter, take, takeUntil} from 'rxjs/operators';
 import {MatMenu} from './menu';
-import {throwMatMenuMissingError} from './menu-errors';
+import {throwMatMenuMissingError, throwMatMenuRecursiveError} from './menu-errors';
 import {MatMenuItem} from './menu-item';
 import {MatMenuPanel} from './menu-panel';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
@@ -121,6 +122,10 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     this._menuCloseSubscription.unsubscribe();
 
     if (menu) {
+      if (isDevMode() && menu === this._parentMenu) {
+        throwMatMenuRecursiveError();
+      }
+
       this._menuCloseSubscription = menu.close.asObservable().subscribe(reason => {
         this._destroyMenu();
 
@@ -370,7 +375,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
    * matMenuTriggerFor. If not, an exception is thrown.
    */
   private _checkMenu() {
-    if (!this.menu) {
+    if (isDevMode() && !this.menu) {
       throwMatMenuMissingError();
     }
   }

src/material/menu/menu.spec.ts

@@ -747,6 +747,13 @@ describe('MatMenu', () => {
     }).toThrowError(/must pass in an mat-menu instance/);
   });
 
+  it('should throw if assigning a menu that contains the trigger', () => {
+    expect(() => {
+      const fixture = createComponent(InvalidRecursiveMenu, [], [FakeIcon]);
+      fixture.detectChanges();
+    }).toThrowError(/menu cannot contain its own trigger/);
+  });
+
   it('should be able to swap out a menu after the first time it is opened', fakeAsync(() => {
     const fixture = createComponent(DynamicPanelMenu);
     fixture.detectChanges();
@@ -2622,3 +2629,14 @@ class LazyMenuWithOnPush {
   @ViewChild('triggerEl', {read: ElementRef}) rootTrigger: ElementRef;
   @ViewChild('menuItem', {read: ElementRef}) menuItemWithSubmenu: ElementRef;
 }
+
+
+@Component({
+  template: `
+    <mat-menu #menu="matMenu">
+      <button [matMenuTriggerFor]="menu"></button>
+    </mat-menu>
+  `
+})
+class InvalidRecursiveMenu {
+}

src/material/menu/menu.ts

@@ -39,6 +39,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   OnInit,
+  isDevMode,
 } from '@angular/core';
 import {merge, Observable, Subject, Subscription} from 'rxjs';
 import {startWith, switchMap, take} from 'rxjs/operators';
@@ -150,7 +151,7 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
   @Input()
   get xPosition(): MenuPositionX { return this._xPosition; }
   set xPosition(value: MenuPositionX) {
-    if (value !== 'before' && value !== 'after') {
+    if (isDevMode() && value !== 'before' && value !== 'after') {
       throwMatMenuInvalidPositionX();
     }
     this._xPosition = value;
@@ -161,7 +162,7 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
   @Input()
   get yPosition(): MenuPositionY { return this._yPosition; }
   set yPosition(value: MenuPositionY) {
-    if (value !== 'above' && value !== 'below') {
+    if (isDevMode() && value !== 'above' && value !== 'below') {
       throwMatMenuInvalidPositionY();
     }
     this._yPosition = value;