CODEWITHSUNDEEP
htmlangularinputmaterial-design
Jus10
Jus10

Reputation: 15669

How to stop <mat-expansion-panel> from triggering with spacebar?

I have a mat-accordion with a textarea box in the panel-description. When I am tying in the text area and hit spacebar it opens/closes the panel. How can I stop this?

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Header
    </mat-expansion-panel-header>
    <mat-panel-description>
      <mat-form-field>
        <textarea matInput></textarea>
      </mat-form-field>
    </mat-panel-description>
  </mat-expansion-panel>
</mat-accordion>

Upvotes: 4

Views: 6396

Answers (4)

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

add (keydown.enter)="$event.preventDefault()" to parent element

<mat-expansion-panel>
    <mat-expansion-panel-header>
   .....
   </mat-expansion-panel-header>
   <div class="panel-body" (keydown.enter)="$event.preventDefault()">
   ....
   </div>
</mat-expansion-panel>

Upvotes: 0

Jos&#233; Feliz
Jos&#233; Feliz

Reputation: 121

I found one solution more clean. Only add to panel-header this for override keydown event SPACE:

(keydown.Space)="$event.stopImmediatePropagation();"



<mat-expansion-panel-header (keydown.Space)="$event.stopImmediatePropagation();">

Ref: https://github.com/angular/components/blob/master/src/material/expansion/expansion-panel-header.ts

Upvotes: 12

Daniel Sauv&#233;
Daniel Sauv&#233;

Reputation: 101

You could also use this shorter version:

<div (keydown.Space)="$event.stopPropagation()">

Upvotes: 2

AnweshCR7
AnweshCR7

Reputation: 68

You do something like this in your html,

<mat-accordion>
 <mat-expansion-panel>
  <div (keydown)="handleSpacebar($event)">
   /*this div should contain elements inside of the mat-expansion-panel
   where you would like to stop the propagation of the space key press*/             
  </div>
 </mat-expansion-panel>
</mat-accordion>

The function in the .js will be as so,

handleSpacebar(ev) {
 if (ev.keyCode === 32) {
   ev.stopPropagation();
 }
}

You can now use space in any of the element inside the div without causing the expansion panel to close. Hope this helps!

Upvotes: 1

Related Questions