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 · May be fixed by #30237
Open

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

aghwotu opened this issue Dec 14, 2024 · 0 comments · May be fixed by #30237
Assignees
Labels
area: cdk/overlay docs This issue is related to documentation P4 A relatively minor issue that is not relevant to core functions

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
@crisbeto crisbeto added P4 A relatively minor issue that is not relevant to core functions area: cdk/overlay and removed needs triage This issue needs to be triaged by the team labels Dec 26, 2024
@crisbeto crisbeto self-assigned this Dec 26, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 26, 2024
Updates the overlay example to ensure that the state of the `isOpen` flag reflects the state of the overlay.

Fixes angular#30185.
@crisbeto crisbeto linked a pull request Dec 26, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: cdk/overlay docs This issue is related to documentation P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants