CODEWITHSUNDEEP
angularangular-material
Mayada Elsayed
Mayada Elsayed

Reputation: 15

open Mat-dialog on (click) and (focus) events

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 => {
    });
}

Upvotes: 0

Views: 3008

Answers (1)

christian
christian

Reputation: 1705

If you want it to trigger when the Tab button is pressed WHILE already focusing the input, you can do that simply via

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

Upvotes: 1

Related Questions