Opening MatDialog from another MatDialog doesn't work in Safari

[tpiros]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Opening a dialog from another dialog doesn't work in Safari

Expected behavior

I'd expect the behaviour to be the same as in Chrome where a dialog can be opened from another dialog.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-1qxhep

If you check the two console.log() statements in safari the result looks different:

Safari

First dialog info:

`MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

Second dialog info:

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

Chrome

First dialog info:

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog1", disableClose: false, _afterOpen: Subject, …}

Second dialog info:

MatDialogRef {_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id: "dialog2", disableClose: false, _afterOpen: Subject, …}

Notice that for Chrome the 'id' parameter passed to the dialogs is properly picked up, for Safari I don't get the same behaviour and therefore Safari does not open the second dialog panel.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.0.0
Material2 version: 2.0.0-beta.12



Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [X] Safari (desktop) version 11.0
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[crisbeto]

Should be fixed by #8051 in the next release.

[EddWills95]

I still had problems with this, but my solution was to wrap opening the second dialog in a setTimeout with a time of 500. After closing the initial dialog window

[goundy]

I had the same problem using IE11 and the EddWills95 workaround worked like a charm.

Please note that this problem does not occur anymore following our Angular 5 update, but this fix allowed us to solve the bug in our previous releases.

protected onSelect(item: BaseEntity) {
    this.close();
        setTimeout(() => {
            this._onSelect(item);;
        }, 500);
}

[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.}