components: Bug MatDialog is unclosable

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Should be able to close dialog

What is the current behavior?

Cannot close dialog - for a predictable/certain code path

What are the steps to reproduce?

Here is the problem: https://www.useloom.com/share/7eb9c523ee3144fb94bb2b49b57dee1b

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular5, Material2, MacOS, tsc version 2.6.1

More info

in both cases, the dialog is created using the same code, here is the code to create dialog:


'use strict';

import {Component, OnInit, Inject, Injectable} from '@angular/core';
import {MainDataService} from '../../services/main';
import {MAT_DIALOG_DATA, MatDialogRef, MatDialogConfig} from '@angular/material';
import {MatDialog} from '@angular/material/dialog';

@Component({
  templateUrl: './stop-recording-dialog.component.html',
  styleUrls: ['./stop-recording-dialog.component.scss']
})

export class StopRecordingDialogComponent implements OnInit {
  
  public dialogResult: any;
  escapeToClose = true;
  
  constructor(public dialogRef: MatDialogRef<StopRecordingDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: string,
              private mds: MainDataService) {
  }
  
  onClickClose() {
    this.dialogRef.close();
    this.mds.dialogEmitter.emit({
      name: 'stop-recording-run-dialog-closed',
      value: 'x'
    });
  }
  
}


@Injectable()
export class StopRecordingDialog {
  
  escapeToClose = true;
  dialogRef: MatDialogRef<StopRecordingDialogComponent> | null;
  
  config = Object.assign(new MatDialogConfig(), {
    width: '600px',
    data: 'This text is passed into the dialog!'
  });
  
  constructor(public dialog: MatDialog, private mds: MainDataService) {}
  
  openDialog() {
    
    this.dialogRef = this.dialog.open(StopRecordingDialogComponent, this.config);
    
    this.dialogRef.beforeClose().subscribe((result: string) => {
      console.log(`Dialog before closed: ${result}`);
    });
    
    this.dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog after closed: ${result}`);
    });
    
  }
}

even when it fails to close, the onClickClose() method is called, so not sure why the dialog won’t close.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17 (15 by maintainers)

Most upvoted comments

Closing since this does sound like an issue with escaping the Angular zone. You can re-enter the zone by injecting NgZone and doing

ngZone.run(() => {
   dialog.close();
});

jelbourn on Jan 31, 2018

@ORESoftware I actually don’t have any Angular 1 experience, so I dunno. The root of this issue is that your browser extension callback is not executing within the NgZone. You can probably pull the ngZone.run() part into this.mds so that it’s consolidated better and not left to your dialog service to handle.

It’s a common issue when incorporating 3rd party libs/apis.

willshowell on Jan 30, 2018

@willshowell I got it to work with the ngZone code you mentioned. TBH, that was fairly hardcore lol. I basically replaced this:

   this.stopRecordingSubject = this.mds.stopRecordingSubject.take(1).subscribe(v => {
      setTimeout(() => {
        this.stopRecordingDialog.openDialog();
       }, 50);
    });

with this:

   this.stopRecordingSubject = this.mds.stopRecordingSubject.take(1).subscribe(v => {
      this.ngZone.run(() => {
        this.stopRecordingDialog.openDialog();
      });
    });

thanks for your help!

ORESoftware on Jan 30, 2018