Styjun

Why is the total number of hard disk sectors shown in fdisk not the same as theoretical calculation?

Why hasn't the U.S. government paid war reparations to any country it attacked?

does ability to impeach an expert witness on science or scholarship go too far?

Why would an Inquisitive rogue choose to use Insightful Fighting as opposed to using their Cunning Action to Hide?

Was adding milk to tea started to reduce employee tea break time?

Can I play a first turn Simic Growth Chamber to have 3 mana available in the second turn?

wavelength of seismic wave with a gaussian source

Why does Hellboy file down his horns?

What does `[$'rn']` mean?

Hacker Rank : Electronics Shop

How does one stock fund's charge of 1% more in operating expenses than another fund lower expected returns by 10%?

Why is dry soil hydrophobic? Bad gardener paradox

When is pointing out a person's hypocrisy not considered to be a logical fallacy?

What is the German equivalent of 干物女 (dried fish woman)?

Is a public company able to check out who owns its shares in very detailed format?

QGIS Linestring rendering curves between vertex

As a DM, how to avoid unconscious metagaming when dealing with a high AC character?

Can anybody provide any information about this equation?

What is temperature on a quantum level?

Is `curl something | sudo bash -` a reasonably safe installation method?

Is it rude to tell recruiters I would only change jobs for a better salary?

Do native speakers use ZVE or CPU?

In which ways do anagamis still experience ignorance?

About the number of real roots

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

Change default behaviour of Angular Material Design <mat-select>Angular Material select key press doesn't scroll to option the first timeHow to prevent Angular/material mat-menu from closing on key-navigation (tab)?When checking Accessibility using Wave Tool for mat-select that uses mat-label , getting Orphaned form label accessibility warningWhy do the Values appear outside of the mat-expansion-panel?Angular Material mat-select underline color change in Angular applicationKeep expanded mat-table from collapsing row when datasource updates (Angular Material)why keypress is not working in mat-select?How to Disable Mat-Select Option once it has been selectedHow can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

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

angular angular-material

share|improve this question

edited Mar 26 at 15:43

OneLunch Man

2,07199 silver badges2222 bronze badges

asked Mar 26 at 5:33

Lone SoldierLone Soldier

1

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Hi Lone Soldier, can you post some code snippets as per stackoverflow.com/help/how-to-ask ?
  
  – Francis
  Mar 26 at 5:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  Mar 26 at 5:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi, may I know what version of Angular Material are you using? And are you using Angular or AngularJs?
  
  – wentjun
  Mar 26 at 6:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @wentjun I believe it's Angular, it looks like AngularJS is still on the whole md naming.
  
  – OneLunch Man
  Mar 26 at 14:28
  

  
  
  
  

add a comment | 

0

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

angular angular-material

share|improve this question

edited Mar 26 at 15:43

OneLunch Man

2,07199 silver badges2222 bronze badges

asked Mar 26 at 5:33

Lone SoldierLone Soldier

1

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Hi Lone Soldier, can you post some code snippets as per stackoverflow.com/help/how-to-ask ?
  
  – Francis
  Mar 26 at 5:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  Mar 26 at 5:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi, may I know what version of Angular Material are you using? And are you using Angular or AngularJs?
  
  – wentjun
  Mar 26 at 6:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @wentjun I believe it's Angular, it looks like AngularJS is still on the whole md naming.
  
  – OneLunch Man
  Mar 26 at 14:28
  

  
  
  
  

add a comment | 

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

angular angular-material

share|improve this question

edited Mar 26 at 15:43

OneLunch Man

2,07199 silver badges2222 bronze badges

asked Mar 26 at 5:33

Lone SoldierLone Soldier

1

angular angular-material

angular angular-material

share|improve this question

edited Mar 26 at 15:43

OneLunch Man

2,07199 silver badges2222 bronze badges

asked Mar 26 at 5:33

Lone SoldierLone Soldier

1

share|improve this question

edited Mar 26 at 15:43

OneLunch Man

2,07199 silver badges2222 bronze badges

asked Mar 26 at 5:33

Lone SoldierLone Soldier

1

edited Mar 26 at 15:43

OneLunch Man

2,07199 silver badges2222 bronze badges

edited Mar 26 at 15:43

OneLunch Man

2,07199 silver badges2222 bronze badges

asked Mar 26 at 5:33

Lone SoldierLone Soldier

1

asked Mar 26 at 5:33

Lone SoldierLone Soldier

1

1 Answer
1

active

oldest

votes

0

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.

share|improve this answer

edited Mar 26 at 6:32

answered Mar 26 at 6:23

wentjunwentjun

6,28111 gold badge44 silver badges2323 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55350437%2fmat-drawer-closes-when-the-escape-key-is-pressed-on-mat-select-inside-mat-drawer%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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.

share|improve this answer

edited Mar 26 at 6:32

answered Mar 26 at 6:23

wentjunwentjun

6,28111 gold badge44 silver badges2323 bronze badges

add a comment | 

0

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.

share|improve this answer

edited Mar 26 at 6:32

answered Mar 26 at 6:23

wentjunwentjun

6,28111 gold badge44 silver badges2323 bronze badges

add a comment | 

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.

share|improve this answer

edited Mar 26 at 6:32

answered Mar 26 at 6:23

wentjunwentjun

6,28111 gold badge44 silver badges2323 bronze badges

<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>

share|improve this answer

edited Mar 26 at 6:32

answered Mar 26 at 6:23

wentjunwentjun

6,28111 gold badge44 silver badges2323 bronze badges

answered Mar 26 at 6:23

wentjunwentjun

6,28111 gold badge44 silver badges2323 bronze badges

answered Mar 26 at 6:23

wentjunwentjun

6,28111 gold badge44 silver badges2323 bronze badges