CODEWITHSUNDEEP
javascripthtmlangularangular-material
infodev
infodev

Reputation: 5245

Make Angular mat-dialog modal listen to keyboard combinations

I have a dialog modal with an input inside it . enter image description here

I would add accessibility to it.

I do it already using dialogRef.keydownEvents.

ngOnInit(): void {
  this.dialogRef.keydownEvents().subscribe(event => {
    if (event.key === "Escape") {
      this.cancel();
    }
    if (event.key === "Enter") {
      this.validate();
    }
  });
}

The problem now is when user tape a text and push Enter to make a line break, the modal get validated then closed.

I would like to make user do a line break using shift+Enter without validating the modal ( because of if (event.key === "Enter"))

Is there a way to do this ?

Upvotes: 0

Views: 869

Answers (1)

coturiv
coturiv

Reputation: 2970

You can do it, try this way:

if (event.key === "Enter" && !event.shiftKey) {
  event.preventDefault();
  
  this.validate();
}

Upvotes: 3

Related Questions