[SOLVED] How to stop angular mat-menu from closing when you click outside of it?

How to stop angular mat-menu from closing when you click outside of it?

I'm using MatMenu as a popup to tour around new users on my web app so I don't want to dismiss it whenever the user clicks outside of it.

I've already used used $event.stopPropagation() to stop it from closing when I click a button inside it. Now I want to know how to keep it open even if you click outside of it.

Solution

The click is handled by the overlay backdrop. You can apply/remove classes to the backdrop dynamically based on your menu open and close, and defeat the backdrop click using CSS with pointer-events.

For example:

HTML

<button mat-button [matMenuTriggerFor]="menu" (menuOpened)="preventCloseOnClickOut()" (menuClosed)="allowCloseOnClickOut()">Menu</button>

export class MenuOverviewExample {
  constructor(private overlayContainer: OverlayContainer) {}

  preventCloseOnClickOut() {
    this.overlayContainer.getContainerElement().classList.add('disable-backdrop-click');
  }

  allowCloseOnClickOut() {
    this.overlayContainer.getContainerElement().classList.remove('disable-backdrop-click');
  }
}

Global CSS

.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  pointer-events: none;
}