Material-components-web: Disable click outside dialog. (not closing the dialog)

[octaviou]

Help Wanted!
I could not figure out how to disable click outside... I only want the user to close/cancel the dialog by clicking on the cancel button.
Can someone pint me out to the right documentation, posts, advices?

many thanks in advance!

[kmmbvnr]

You could exclude <div class="mdc-dialog__backdrop"></div> from a dialog markup.

If you still need an unclickable backdrop, you can just copy backdrop CSS styles to a class with a different name.

[patrickrodee]

Thanks for submitting an issue. We're gonna ask our designers about this.

Be aware that there are more ways to close a Dialog than clicking outside it. Pressing the Escape key also closes the Dialog.

Are you trying to prevent Dialog closing in every case except for clicking one of the Dialog actions?

[octaviou]

@kmmbvnr : Many thanks! I have tried it and it actually works fine it just that it feels a bit "hackish"
@patrickrodee : I am aware of... my goal is to avoid accidental clicks, escape to close is accepted. Thanks!

[patrickrodee]

I understand.

A solution on your end that doesn't require modifications to the repo would be to add a class to mdc-dialog__backdrop that sets pointer-events: none;.

For example...

.no-click-backdrop {
  pointer-events: none;
}

That disables interaction with the backdrop element.

Let me know how that works.

[williamernest]

The workaround posted by @patrickrodee works. Closing this issue.

[Xplore-UX]

dialog_x = new mdc.dialog.MDCDialog(document.querySelector('#dialog_el'));
dialog_x.scrimClickAction = "";
dialog_x.escapeKeyAction = ""; //for escape

[christiyan14]

Here is my solution who working great in Angular 9 ->

addNew() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;

const dialogRef = this.dialog.open(AddDialogComponent, dialogConfig);

}

[Babs95]

just add : dialogRef.disableClose = true;
This will disable the outside click and the esc key