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 db2101c994)

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">

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">

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">

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">

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">

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">

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">

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">

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">