I have a Angular material Menu inside a Material Dialog. On pressing ESC, Menu and Dialog both are closed. How to prevent dialog to not close on ESC?

Question

I have a mat menu inside mat dialog. After opening dialog and then menu inside it, i pressed esc to close the menu, but both menu and dialog are closed. How to close just the menu and not the dialog with ESC?

It can be reproduced here. https://stackblitz.com/edit/angular-wzau6u

Answer 1

You can add disableClose: true to the dialogRef configuration, to prevent the dialog closing from pressing esc. It's explained in the API of the Dialog component.

disableClose: boolean
Whether the user can use escape or clicking on the backdrop to close the modal.

openDialog(): void {
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    width: '250px',
    data: {name: this.name, animal: this.animal},
    disableClose: true
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    this.animal = result;
  });
}

See this updated StackBlitz for reference.