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.

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

docs-bug(cdk-overlay): Add missing detach handler in overlay example #30185

Open
aghwotu opened this issue Dec 14, 2024 · 0 comments
Open

docs-bug(cdk-overlay): Add missing detach handler in overlay example #30185

aghwotu opened this issue Dec 14, 2024 · 0 comments
Labels
docs This issue is related to documentation needs triage This issue needs to be triaged by the team

Comments

@aghwotu
Copy link

aghwotu commented Dec 14, 2024

Documentation Feedback

The CDK Overlay example is missing a crucial event handler. Specifically, when using the ESC key to close the overlay, the parent component's state isn't properly updated, leading to inconsistent behavior:

  1. Current behavior (demonstrated in the StackBlitz):

    • Closing with ESC requires two clicks to reopen
  2. The solution is to add the detach handler (demonstrated in the StackBlitz):

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
  (detach)="isOpen = false"  <!-- Add this line -->
>
  <!-- content -->
</ng-template>

Here is a StackBlitz link that demonstrates both the issue and the working solution with the detach handler. I'm ready to submit a PR implementing these changes once this approach is confirmed.

Affected documentation page

https://material.angular.io/cdk/overlay/overview

@aghwotu aghwotu added docs This issue is related to documentation needs triage This issue needs to be triaged by the team labels Dec 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs This issue is related to documentation needs triage This issue needs to be triaged by the team
Projects
None yet
Development

No branches or pull requests

1 participant