Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Closing sidenav with escape does not work when mode is "side" #17965

Closed
alexbjorlig opened this issue Dec 13, 2019 · 2 comments
Closed

Closing sidenav with escape does not work when mode is "side" #17965

alexbjorlig opened this issue Dec 13, 2019 · 2 comments
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@alexbjorlig
Copy link

Reproduction

Steps to reproduce:

  1. Open this stackblitz
  2. Click the sidenav.toggle() button to open sidenav
  3. Press escape on your keyboard

Expected Behavior

What behavior were you expecting to see?
I was expecting the sidenav to close.

Actual Behavior

Sidenav does not close.

Environment

  • Angular: 8.2
  • CDK/Material: 8.2
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS

Workaround

There seems to be 2 workarounds. Related SO question.

  1. Setting focus inside the sidenav, and then pressing escape
  2. Adding a @HostListener on the esc key
@crisbeto crisbeto self-assigned this Dec 14, 2019
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Dec 14, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 14, 2019
@crisbeto
fix(sidenav): unable to close by pressing escape in side mode
9ecf504 
We currently listen for `keydown` events on the sidenav so that we know when to close it, however in `side` mode we don't trap focus inside the sidenav which means that unless the user goes into the sidenav manually, the escape listener won't work. These changes fix the issue by listening to keyboard events at the `document` level.

Fixes angular#17965.
@crisbeto crisbeto mentioned this issue Dec 14, 2019
Closed
@crisbeto
Copy link
Member

We decided against fixing this, because the fix would depend on how the sidenav is used in the application. See the discussion in #17967. For your case you should be able to fix it by adding adding another keyboard listener and using the API to close it.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 16, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(sidenav): unable to close by pressing escape in side mode crisbeto/material2
2 participants
@crisbeto @alexbjorlig