From 9dff7f48c577910ebd2cdc1309fac01bdb4d3f49 Mon Sep 17 00:00:00 2001
From: Karim Daher <daher.kareem@hotmail.com>
Date: Wed, 3 Jun 2026 18:03:06 +0300
Subject: [PATCH] docs: disable overlay close-on-escape in Aria menubar
 examples

The Aria menubar examples render each menu in a `cdkConnectedOverlay`,
which detaches the top-most overlay on every Escape keypress
(`disableClose` defaults to `false`). The top-level menus are always
attached, so a detached overlay never reattaches and its `viewChild`
reference becomes `undefined`. Holding Escape detaches the overlays one by
one, permanently breaking menus such as "Insert" and "Format".

Set `cdkConnectedOverlayDisableClose` on the example overlays so the menu
pattern remains the single owner of open/close state, matching the
combobox and toolbar examples. Applied to the basic, disabled, and rtl
menubar examples (and their material/retro variants).

(cherry picked from commit db2101c994f42255b5ad595e6a025d23fade341e)
---
 .../examples/aria/menubar/src/basic/app/app.html     | 12 ++++++++++++
 .../aria/menubar/src/basic/material/app/app.html     | 12 ++++++++++++
 .../aria/menubar/src/basic/retro/app/app.html        | 12 ++++++++++++
 .../examples/aria/menubar/src/disabled/app/app.html  | 12 ++++++++++++
 .../aria/menubar/src/disabled/material/app/app.html  | 12 ++++++++++++
 .../aria/menubar/src/disabled/retro/app/app.html     | 12 ++++++++++++
 .../examples/aria/menubar/src/rtl/app/app.html       | 12 ++++++++++++
 .../aria/menubar/src/rtl/material/app/app.html       | 12 ++++++++++++
 .../examples/aria/menubar/src/rtl/retro/app/app.html | 12 ++++++++++++
 9 files changed, 108 insertions(+)

diff --git a/adev/src/content/examples/aria/menubar/src/basic/app/app.html b/adev/src/content/examples/aria/menubar/src/basic/app/app.html
index 86fb4aaf6a0..7a9b677266f 100644
--- a/adev/src/content/examples/aria/menubar/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/basic/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -462,6 +471,7 @@
                 [cdkConnectedOverlayPositions]="[
                   {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -498,6 +508,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -525,6 +536,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/adev/src/content/examples/aria/menubar/src/basic/material/app/app.html b/adev/src/content/examples/aria/menubar/src/basic/material/app/app.html
index 9e9bcdf4fdd..67a58fca23d 100644
--- a/adev/src/content/examples/aria/menubar/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/basic/material/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -462,6 +471,7 @@
                 [cdkConnectedOverlayPositions]="[
                   {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -498,6 +508,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -525,6 +536,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html b/adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html
index fbf5ba97bdc..4c6360caecf 100644
--- a/adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -462,6 +471,7 @@
                 [cdkConnectedOverlayPositions]="[
                   {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -498,6 +508,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -525,6 +536,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/adev/src/content/examples/aria/menubar/src/disabled/app/app.html b/adev/src/content/examples/aria/menubar/src/disabled/app/app.html
index 86fb4aaf6a0..7a9b677266f 100644
--- a/adev/src/content/examples/aria/menubar/src/disabled/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/disabled/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -462,6 +471,7 @@
                 [cdkConnectedOverlayPositions]="[
                   {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -498,6 +508,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -525,6 +536,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/adev/src/content/examples/aria/menubar/src/disabled/material/app/app.html b/adev/src/content/examples/aria/menubar/src/disabled/material/app/app.html
index 9e9bcdf4fdd..67a58fca23d 100644
--- a/adev/src/content/examples/aria/menubar/src/disabled/material/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/disabled/material/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -462,6 +471,7 @@
                 [cdkConnectedOverlayPositions]="[
                   {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -498,6 +508,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -525,6 +536,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.html b/adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.html
index fbf5ba97bdc..4c6360caecf 100644
--- a/adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -462,6 +471,7 @@
                 [cdkConnectedOverlayPositions]="[
                   {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -498,6 +508,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -525,6 +536,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/adev/src/content/examples/aria/menubar/src/rtl/app/app.html b/adev/src/content/examples/aria/menubar/src/rtl/app/app.html
index 4874145bcee..7b2326d3272 100644
--- a/adev/src/content/examples/aria/menubar/src/rtl/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/rtl/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -462,6 +471,7 @@
                 [cdkConnectedOverlayPositions]="[
                   {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -498,6 +508,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -525,6 +536,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/adev/src/content/examples/aria/menubar/src/rtl/material/app/app.html b/adev/src/content/examples/aria/menubar/src/rtl/material/app/app.html
index 7bc1dbc6578..9cc715f6c65 100644
--- a/adev/src/content/examples/aria/menubar/src/rtl/material/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/rtl/material/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -462,6 +471,7 @@
                 [cdkConnectedOverlayPositions]="[
                   {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -498,6 +508,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -525,6 +536,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.html b/adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.html
index 40277cd61f1..1fd5d6f6b0e 100644
--- a/adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.html
+++ b/adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.html
@@ -16,6 +16,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -61,6 +62,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -130,6 +132,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -202,6 +205,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -258,6 +262,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -278,6 +283,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -329,6 +335,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -391,6 +398,7 @@
     [cdkConnectedOverlayPositions]="[
       {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
     ]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -411,6 +419,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -468,6 +477,7 @@
                     offsetX: -12,
                   },
                 ]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -504,6 +514,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -531,6 +542,7 @@
           [cdkConnectedOverlayPositions]="[
             {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
           ]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">