From eca163c559263be2010f5599130fb9b2374d8a84 Mon Sep 17 00:00:00 2001
From: Karim Daher <daher.kareem@hotmail.com>
Date: Wed, 3 Jun 2026 17:22:50 +0300
Subject: [PATCH] docs(aria/menu): disable overlay close-on-escape in menubar
 examples

The menubar examples host each menu in a `cdkConnectedOverlay`, which
detaches the top-most overlay on every Escape keypress. Because the
top-level menus are always attached (`cdkConnectedOverlayOpen="true"`), a
detached overlay never reattaches. Holding Escape while a menu is open
tears the overlays down one at a time: once focus returns to the menubar,
the remaining Escape events keep destroying the still-attached menus,
leaving items such as "Insert" and "Format" permanently unable to open.

Set `cdkConnectedOverlayDisableClose` on the overlays so the menu pattern
remains the single owner of open/close state. This matches the combobox
and toolbar examples, which already pair their overlays with
`disableClose`. Applied to the `menubar`, `menubar-disabled`, and
`menubar-rtl` examples.
---
 .../menubar-disabled/menubar-disabled-example.html   | 12 ++++++++++++
 .../menubar/menubar-rtl/menubar-rtl-example.html     | 12 ++++++++++++
 .../aria/menubar/menubar/menubar-example.html        | 12 ++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.html b/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.html
index f12ccbaa7379..0a0505ab1ef8 100644
--- a/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.html
+++ b/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.html
@@ -14,6 +14,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -47,6 +48,7 @@
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -104,6 +106,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -166,6 +169,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -216,6 +220,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -230,6 +235,7 @@
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -267,6 +273,7 @@
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -317,6 +324,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -331,6 +339,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -370,6 +379,7 @@
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
                 [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -400,6 +410,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -421,6 +432,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.html b/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.html
index 1c8a8a3c2868..3f130f7bc8a4 100644
--- a/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.html
+++ b/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.html
@@ -14,6 +14,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -47,6 +48,7 @@
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -104,6 +106,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -166,6 +169,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -216,6 +220,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -230,6 +235,7 @@
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -267,6 +273,7 @@
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -317,6 +324,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -331,6 +339,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -370,6 +379,7 @@
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
                 [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -400,6 +410,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -421,6 +432,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">
diff --git a/src/components-examples/aria/menubar/menubar/menubar-example.html b/src/components-examples/aria/menubar/menubar/menubar-example.html
index 0648bb77890b..f514e32d3597 100644
--- a/src/components-examples/aria/menubar/menubar/menubar-example.html
+++ b/src/components-examples/aria/menubar/menubar/menubar-example.html
@@ -14,6 +14,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -47,6 +48,7 @@
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -104,6 +106,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -166,6 +169,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -216,6 +220,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -230,6 +235,7 @@
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -267,6 +273,7 @@
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -317,6 +324,7 @@
     [cdkConnectedOverlayOpen]="true"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
+    [cdkConnectedOverlayDisableClose]="true"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -331,6 +339,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -370,6 +379,7 @@
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
                 [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+                [cdkConnectedOverlayDisableClose]="true"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -400,6 +410,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -421,6 +432,7 @@
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
           [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayDisableClose]="true"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">