Decouple backdrop click and ESC press on mat-dialog

[salemdar]

Feature request:

Both ESC and backdrop click closes an active dialog. This can be disabled at the moment, but only all together. These two behaviours should be decoupled.

What is the expected behavior?

MatDialogConfig should have 2 extra properties:

// ...
disableCloseOnEscape: boolean,
disableCloseOnBackdropClick: boolean

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

So we can disable closing on backdrop click, but keep close on ESC press. It would be very helpful for inaccurate mouse users :).

[willshowell]

The suggested approach for this is to set disableClose and then use keydownEvents or backdropClick to re-enable the desired behavior.

See #3460 and linked threads for more context.

[salemdar]

@willshowell thanks for your comment. I am aware that there are possible workarounds. For example, I wrote something like this:

const dialogRef = this.dialog.open(MyDialogComponent, {
  disableClose: true
});
dialogRef.keydownEvents()
  .filter((e: KeyboardEvent) => e.code === 'Escape')
  .take(1)
  .subscribe(() => dialogRef.close());

But wouldn't it be nice to have it out of box? I believe it could be useful for many people.

[willshowell]

@salemdar the team (at least in the past) has held pretty strong to this. See #3460 (comment) for a better explanation than I can give.

[jelbourn]

Yep, as per Will's comment, we don't really want to decouple these behaviors.

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