0

I'm using the angular material dialog (v7), we have editable cells in the dialog and in the below page as well we have editable cells like text area/text inputs.

When dialog open if I pressed ctrl+z then undo operation working in both dialog and background page as well

How to disable all controls (like ctrl+z) in the background page when the dialog is opened.

for a live example of an issue, please check the last example in the following page https://material.angular.io/components/dialog/examples

kian
  • 1,449
  • 2
  • 13
  • 21
Rams
  • 2,141
  • 5
  • 33
  • 59
  • I can reproduce in Chrome 94.0.4606.81 if there is no focus in a field in the dialog. I cannot reproduce in FF 93.0. Using the example at the bottom of the page here: https://material.angular.io/components/dialog/examples – andrew Oct 19 '21 at 03:34
  • This issue might be related: https://github.com/angular/components/issues/13054 – andrew Oct 19 '21 at 03:34

1 Answers1

0

After doing some research I found that this is the default behavior of HTML inputs,

If you undo the last input here twice then the previous input will automatically get focus.

One way to solve this issue is to make all the previous input readonly

openDialog(): void {
  this.readonly = true;
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog);

  dialogRef.afterClosed().subscribe((result) => {
    this.readonly = false;
  });
}

<mat-form-field>
  <input
    matInput
    [(ngModel)]="name"
    placeholder="What's your name?"
    [readonly]="readonly"
  />
</mat-form-field>

Stackblitz Example Here

Sameer
  • 4,758
  • 3
  • 20
  • 41