Components: [sidenav] Prevent closing by ESC key

[Nodarii]

Bug, feature request, or proposal:

Feature

What is the expected behavior?

I expect to have an API that doesn't allow user to close sidebar by clicking ESC

What is the current behavior?

When user gives focus to sidenav and then clicks ESC - it triggers sidenav close

What are the steps to reproduce?

https://material.angular.io/components/sidenav/examples

What is the use-case or motivation for changing an existing behavior?

There are cases when sidenav is open by default and user dont have any control to "toggle" it visibility

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.2.7
node: 8.2.1
os: win32 x64
@angular/animations: 5.0.0-beta.2
@angular/cdk: 2.0.0-beta.8
@angular/common: 5.0.0-beta.2
@angular/compiler: 5.0.0-beta.2
@angular/core: 5.0.0-beta.2
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 5.0.0-beta.2
@angular/http: 5.0.0-beta.2
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 5.0.0-beta.2
@angular/platform-browser-dynamic: 5.0.0-beta.2
@angular/platform-server: 5.0.0-beta.2
@angular/router: 5.0.0-beta.2
@angular/cli: 1.2.7
@angular/compiler-cli: 5.0.0-beta.2

[kherock]

While that's definitely a bug in the docs site, this use case is actually already documented. You just need to specify [disableClose]="true" on your md-sidenav component.

From the Sidenav API docs:

Name | Description
-- | --
@Input() disableClose | Whether the sidenav can be closed with the escape key or not.

[Nodarii]

@rockmacaca, thank you.

[golden987]

Thanks!!!!!!!!!!!!!

[Groxot]

While that's definitely a bug in the docs site, this use case is actually already documented. You just need to specify [disableClose]="true" on your md-sidenav component.

From the Sidenav API docs:

Name Description
@Input() disableClose Whether the sidenav can be closed with the escape key or not.

its solution disable close by backdrop click.
you can use instead

(keydown.escape)="dontClose($event)"

dontClose(){
    this.sidenav.disableClose = true;
    setTimeout(()=> this.sidenav.disableClose = false);
}

[tariva]

Only closing in mobile view:
component:

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

template:
[disableClose]="(isHandset$ | async) ? 'false' : 'true'"

[angular-automatic-lock-bot[bot]]

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._}