Components: Bug[MatDialog]: disableClose=false not working with hasBackdrop=false

[th3n3wguy]

Bug, feature request, or proposal:

• Bug

What is the expected behavior?

• The disableClose property, when set to false, should allow the user to click outside of the modal to close it whenever the hasBackdrop property is also set to false.

What is the current behavior?

• If both the disableClose and hasBackdrop properties are set to false, the user should still be able to click outside of the modal to close it.

What are the steps to reproduce?

• Demo => https://angular-macdjt-y1ebqh.stackblitz.io
• Code for Demo => https://stackblitz.com/edit/angular-macdjt-y1ebqh

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

• N/A

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

• Angular => 5
• Material => 5.2.2 & 5.2.3
• OS => Windows 10
• TypeScript => 2.4.x
• Browser(s) => Chrome (Version 64.0.3282.167 (Official Build) (64-bit))

Is there anything else we should know?

[julianobrasil]

I'm not sure, but I think in this case, the backdrop is used to detect a click on the outside of the dialog. So, if you disable the backdrop, you cannot expect it to close with outside clicks. It works with ESC though.

[th3n3wguy]

@julianobrasil => I just realized that it does, in fact, work with the ESC key, but clicking out does not and it is stated in the documentation that it should. I will update my issue notes now.

I am okay with the fact that these two properties might not work together (probably because they are binding the click even to the backdrop / overlay), but then the documentation should be updated to reflect that functionality.

[crisbeto]

The backdrop is used to handle the clicks outside the dialog. When you set hasBackdrop to false, the element won't be rendered at all. If you don't want the darkened backdrop, but still want clicking outside to work, you can set the backdropClass to cdk-overlay-transparent-backdrop.

[th3n3wguy]

@crisbeto => I tried your suggestion in the provided Stackblitz and it still doesn't fix the issue of clicking outside the dialog. Do you have any other suggestions?

[crisbeto]

It seems to work here: https://stackblitz.com/edit/angular-macdjt-cfkdpg

[th3n3wguy]

@crisbeto => .............I...am not sure what the heck I did wrong there.

Thank you for the provided workaround, but I do still believe that this should be done automatically by the library, rather than having to remember to do this by setting another property. What do you think @crisbeto?

[crisbeto]

I'd say that the config options are explicit enough. I don't think that we can handle this automatically without making some assumptions which could break existing usages.

[angular-automatic-lock-bot[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._}