bug(mat-menu): Clicking a [matMenuTriggerFor] inside its own mat-menu crashes JS

[tomasdev]

Note: This might be an invalid use case, as it's wrongly using a directive. Still, it wouldn't hurt to have a safety check to prevent this.

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-japg2m?file=src%2Fapp%2Fmenu-overview-example.html

Steps to reproduce:

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

1. Click "Open"
2. Click Close
3. Open console and observe fatal error:

ERROR Error: Maximum call stack size exceeded
ERROR Error: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

Expected Behavior

Page (main JS thread) shouldn't crash when having a closing button inside the menu.

Actual Behavior

Page (main JS thread) crashes.

Environment

• Angular: 10.x
• CDK/Material: 10.x
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[angular-automatic-lock-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.}