在 (click) 和 (focus) 事件上打开 Mat-dialog

Question

I have a form field that opens a Mat Dialog, and I want it to open on mouse click or keyboard (tab button press), I tried using both (click) and (focus) events, but the input keeps opening sometimes after closing it.

<input #loc formControlName="loc" (click)="openDialog()" (focus)="openDialog()" placeholder="Enter you location" matInput required  [readonly]="true"/>

openDialog(): void {
    this.locInput.focused = !this.locaInput.focused;
    if (this.locInput.focused) {
    const dialogRef = this.dialog.open(locDialogComponent, {
      width: '524px',
      data: {
        location: this.location;
      }
    });

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

Answer 1

如果您希望它在已经聚焦输入的同时按下 Tab 按钮时触发，您可以简单地通过

<input (keydown.Tab)="openDialog()" />