docs: close menù with click outside container

aparzi · atscott · commit dc8165e25389 · 2026-06-08T12:57:59.000-07:00
close menù with click outside container Fixes #69222
diff --git a/adev/src/content/examples/aria/menu/src/menu-context/app/app.html b/adev/src/content/examples/aria/menu/src/menu-context/app/app.html
@@ -17,7 +17,14 @@
 <!-- Overlay container for the menu -->
 <ng-template
   [cdkConnectedOverlayOpen]="trigger.expanded()"
-  [cdkConnectedOverlay]="{origin: triggerEl, usePopover: 'inline'}"
+  [cdkConnectedOverlay]="{
+    origin: triggerEl,
+    usePopover: 'inline',
+    hasBackdrop: true,
+    backdropClass: 'cdk-overlay-transparent-backdrop',
+  }"
+  (backdropClick)="closeContextMenu()"
+  (overlayKeydown)="onOverlayKeydown($event)"
   cdkAttachPopoverAsChild
 >
   <div ngMenu #contextMenu="ngMenu" (itemSelected)="onItemSelected($event)">
diff --git a/adev/src/content/examples/aria/menu/src/menu-context/app/app.ts b/adev/src/content/examples/aria/menu/src/menu-context/app/app.ts
@@ -28,4 +28,16 @@ export class App {
   onItemSelected(value: string) {
     console.log(`Action selected: ${value}`);
   }
+
+  onOverlayKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.closeContextMenu();
+    }
+  }
+
+  closeContextMenu() {
+    if (this.trigger().expanded()) {
+      this.trigger().close();
+    }
+  }
 }
