CODEWITHSUNDEEP
angularangular-material
Ankur Kadam
Ankur Kadam

Reputation: 41

Prevent mat-expansion-panel from being toggled by SPACE key

I have tried the below code, onFilterKeyboard is getting called also, but still SPACE key is working.

<mat-expansion-panel-header (keydown)="onFilterKeyboard($event);">
  <mat-panel-title (keydown)="onFilterKeyboard($event);">
    <div (keydown)="onFilterKeyboard($event);">{{aFilter.name}}</div>
  </mat-panel-title>
</mat-expansion-panel-header>

In JS:

onFilterKeyboard(event) {
  event.preventDefault();
  event.stopImmediatePropagation();
  event.stopPropagation();
}

Upvotes: 3

Views: 1672

Answers (2)

Ankur Kadam
Ankur Kadam

Reputation: 41

(keydown.Space)="onFilterKeyboard($event);" worked. It will create a pseudo event. For more about pseudo event refer https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee

Upvotes: 1

Augustin R
Augustin R

Reputation: 7799

You can try to add this in the component's constructor or ngOnInit :

document.addEventListener('keydown', (event) => {
  if (event.keyCode == 32) { // 32 is space bar key code
    event.stopPropagation();
  }
});

Upvotes: 1

Related Questions