mat-drawer closes when the escape key is pressed on mat-select inside mat-drawer

Question

There is a mat-select angular tag inside a mat-drawer. When the focus is on mat-select and it is expanded, on pressing escape key, the whole mat-drawer closes but instead the drop down of mat-select should close.

I was thinking that we can prevent the default behavior of escape key but then it will also prevent the closing of mat-select and ultimately mat-drawer.

Actual: The whole mat-drawer(Side navigation window) closes on pressing escape when the mat-select is still expanded.

Expected: First the mat-select should collapse on pressing escape, after that on pressing escape the mat drawer should close.enter image description here

Hi Lone Soldier, can you post some code snippets as per stackoverflow.com/help/how-to-ask ? — Francis
Hi Lone Soldier, you've tagged both angularjs and angular which are 2 different frameworks (albeit the second is based on the concepts of the first). Please remove the irrelevant tag according to which framework you're actually using. — ethanfar
Hi, may I know what version of Angular Material are you using? And are you using Angular or AngularJs? — wentjun
@wentjun I believe it's Angular, it looks like AngularJS is still on the whole md naming. — user10747134

wentjun wentjun · Accepted Answer · 2019-03-26T06:23:49

Next time, please produce your own editable demo so that we can work on it. Anyways, my solution to your problem is to stop the event propagation with the 'escape' key is pressed. This is done by binding the keydown event.

I have made a demo using my solution, whereby the mat-select is placed within the mat-drawer.

However, do note that if you would like to use the escape key after selecting something on mat-select you will have to 'unfocus' the mat-select, by tapping/clicking outside of the mat-select so that the mat-select is no longer 'focused'.

<mat-form-field>
  <mat-label>Cars</mat-label>
  <mat-select (keydown.escape)="$event.stopPropagation()">
    <mat-option  *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

This will prevent the 'escape' key from closing the drawer when mat-select is focused, yet allowing you to close mat-drawer with the 'escape' key when you are not using mat-select.

mat-drawer closes when the escape key is pressed on mat-select inside mat-drawer

1 Answers