From 68354e4ce299ab6e132935a3228ce75bd3e9f693 Mon Sep 17 00:00:00 2001
From: aparziale <angeloparziale94@gmail.com>
Date: Mon, 8 Jun 2026 15:54:01 +0200
Subject: [PATCH] =?UTF-8?q?docs:=20close=20men=C3=B9=20with=20click=20outs?=
 =?UTF-8?q?ide=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close menù with click outside container

Fixes #69222
---
 .../examples/aria/menu/src/menu-context/app/app.html |  9 ++++++++-
 .../examples/aria/menu/src/menu-context/app/app.ts   | 12 ++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

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
index 5221bc44409..c84e8133cc0 100644
--- 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
index 908b3532e2d..7fc364082df 100644
--- 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();
+    }
+  }
 }