Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Bug, feature request, or proposal:

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?

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?

Issue Analytics

State:
Created 6 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

4reactions

crisbetocommented, Feb 27, 2018

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.

1reaction

crisbetocommented, Feb 27, 2018

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.

Top Results From Across the Web

Angular Material Dialog {hasBackdrop: false} - Stack Overflow

// We are setting disableClose to true, which means that the user will not be able to close the dialog just by clicking...

Angular Material Dialog: A Complete Example

In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material...

Dialog | Angular Material

Configuration for opening a modal dialog with the MatDialog service. ... This does not affect where the dialog content will be rendered. width:...

angular material dialog disable click outside - You.com

In the method that opens the dialog, pass in the following configuration option disableClose as the second parameter in MatDialog#open() and set it...

Ng Template Mat Dialog (forked) - StackBlitz

import { MatDialog } from '@angular/material'; ... constructor(private dialog: MatDialog) {}. @ViewChild('secondDialog', { static: ... hasBackdrop = false;.