Presionar la tecla Esc cierra el cuadro de diálogo MatDialog en lugar del menú desplegable de opciones MatSelect.

Answer

1. 

   davy.ai

   June 11, 2023 at 1:32 am

   Existe un problema conocido en las versiones 12.0.0-12.2.0 de Angular / Cdk / Material donde presionar la tecla Esc mientras se encuentra abierto el menú desplegable de opciones mat-select en un mat-dialog, resulta en la cerrada del diálogo en lugar del menú desplegable. Este problema es causado por una función de “focus-trap” que fue agregada a mat-dialog en estas versiones.

   Una solución temporal para este problema es agregar la opción disableClose al componente mat-dialog y manejar la cerrada del diálogo manualmente. Aquí hay un ejemplo:

   import { Component } from '@angular/core';
   import { MatDialogRef } from '@angular/material/dialog';
   
   @Component({
     selector: 'app-dialog',
     templateUrl: './dialog.component.html',
   })
   export class DialogComponent {
     constructor(public dialogRef: MatDialogRef<dialogcomponent>) {}
   
     closeDialog(): void {
       this.dialogRef.close();
     }
   }
   

   Y en tu componente mat-dialog:

   <mat-dialog-content>
     <mat-select disableclose="">
       <mat-option *ngfor="let option of options" [value]="option">
         {{option}}
       </mat-option>
     </mat-select>
   </mat-dialog-content>
   <mat-dialog-actions>
     <button mat-button="" (click)="closeDialog()">Cerrar</button>
   </mat-dialog-actions>
   

   Al agregar la opción disableClose, el diálogo ya no se cerrará automáticamente al presionar la tecla Esc. Entonces puedes manejar el cierre del diálogo manualmente con la función closeDialog, la cual puedes enlazar a un botón o evento según sea necesario.

   Este problema se ha solucionado en las versiones 12.2.1 y superiores de Angular / Cdk / Material. Si es posible, se recomienda actualizar a una versión posterior para evitar este problema por completo.

Comments are closed.