Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat(cdk/overlay): connected-overlay directive should have input for disabling escape close

See original GitHub issue

Feature Description

Currently connected-overlay is hardcoded to be closed on escape. https://github.com/angular/components/blob/5f125395e0d39eb7e6a34d0c3355fc474f4d37a8/src/cdk/overlay/overlay-directives.ts#L287-L289 I propose adding a way to control this behavior.

Use Case

In my project I need an overlay that does not close on keyboard event. Also, if in the overlay we have a form, there may happen a situation when user should be forced to complete it before closing the overlay.

I create overlay in this manner:

  cdk-connected-overlay
  cdkConnectedOverlayHasBackdrop
  cdkConnectedOverlayBackdropClass="light-backdrop"
  [cdkConnectedOverlayOrigin]="origin"
  [cdkConnectedOverlayPositions]="positions"
  [cdkConnectedOverlayOpen]="isOpen"
  [cdkConnectedOverlayScrollStrategy]="scrollStrategy"

Issue Analytics

State:
Created 3 years ago
Reactions:7
Comments:6 (5 by maintainers)

Top GitHub Comments

5reactions

victorwardcommented, Sep 15, 2020

Any update on this feature, for us it’s something crucial … We can contribute if you need any help 😉

0reactions

victorwardcommented, Nov 30, 2022

Yes, it was solved for me when it was released. I don’t remember the details but I see that we are using it

Top Results From Across the Web

Angular cdkOverlay disable close - Stack Overflow

I would like to disable close. In the API (https://beta-angular-material-io.firebaseapp.com/cdk/overlay/api) there is the input:.

Overlay | Angular Material

Directive applied to an element to make it usable as an origin for an Overlay using a ConnectedPositionStrategy. Selector: [cdk-overlay-origin] ...

@angular/cdk | Yarn - Package Manager

The Angular team builds and maintains both common UI components and tools to help you build your own custom components. The team maintains...

Angular CDK - Overlay Module Pt.2 (Advanced, 2020)

In this tutorial, we will have a look at such advanced topics as overlay positioning, overlay position strategies, handling of scrolling ...

@angular/material: Versions | Openbase

fixup! feat(material/dialog): Switch dialog implementation to use MDC ... overlay: connected-overlay directive should have input for disabling escape close ...