MatDialog - disableClose is dependent on hasBackdrop being true

[marc-wilson]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

MatDialogConfig disableClose should function like the documentation states:

disableClose: boolean | Whether the user can use escape or clicking outside to close a modal.

There is not mentioning of disableClose being dependent on hasBackdrop being true, but there is.

What is the current behavior?

disableClose should work whether or not hasBackdrop is true or false. Currently, the disableClose will only work if hasBackdrop is set to true. The documentation should either be updated to specify that disableClose is dependent on hasBackdrop or the bug should be fixed so that disableClose can be used regardless of the value of hasBackdrop.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://stackblitz.com/edit/angular-ev6jqa?file=app/dialog-overview-example.ts

What is the use-case or motivation for changing an existing behavior?

Quality

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

Angular 5 and 6

Is there anything else we should know?

[willshowell]

Hey @mswilson4040 I wanted to respond to your comments in #11767 but it seemed more appropriate to do it here

[MatDialog] should operate just like MatSelect or MatMenu. There is no backdrop with those components but when a user clicks outside of it, it automatically closes ... I understand there is a workaround by adding a custom backdropClass, but it's a workaround.

There are backdrops for MatSelect and MatMenu, they're just transparent. Adding a custom backdropClass is not a workaround, it's the expected way to compose the behavior you need.

https://github.com/angular/material2/blob/8be6d45aa336217b403e06da4a818dbeba3d1fdf/src/lib/select/select.html#L21-L22

https://github.com/angular/material2/blob/8be6d45aa336217b403e06da4a818dbeba3d1fdf/src/lib/menu/menu-trigger.ts#L354-L355

disableClose should work whether or not hasBackdrop is true or false

This is already the case. disableClose prevents the dialog from being closed via a backdrop click or esc. If the dialog does not have a backdrop (hasBackdrop: false), you are still unable to close the dialog via esc.

Think of the backdrop as a giant <div> sitting between the overlay and the rest of the page. It doesn't matter if it's styled dark gray, transparent, rainbow colored: if it doesn't exist, there is no way to catch clicks on it.

[marc-wilson]

Fair enough. Just seems a little awkward since those two options serve two different use cases. But I understand that angular uses that backdrop to detect the click.

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