Skip to content

Commit 5fad07b

Browse files
DaherkarimDaherkarim
authored
docs(aria/menu): disable overlay close-on-escape in menubar examples (angular#33344)
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.
1 parent c729db7 commit 5fad07b

3 files changed

Lines changed: 36 additions & 0 deletions

File tree

‎src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
[cdkConnectedOverlayOpen]="true"
1515
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
1616
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
17+
[cdkConnectedOverlayDisableClose]="true"
1718
cdkAttachPopoverAsChild
1819
>
1920
<div ngMenu #fileMenu="ngMenu">
@@ -47,6 +48,7 @@
4748
[cdkConnectedOverlayOpen]="!!fileItem.expanded()"
4849
[cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
4950
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
51+
[cdkConnectedOverlayDisableClose]="true"
5052
cdkAttachPopoverAsChild
5153
>
5254
<div ngMenu #shareMenu="ngMenu">
@@ -104,6 +106,7 @@
104106
[cdkConnectedOverlayOpen]="true"
105107
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
106108
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
109+
[cdkConnectedOverlayDisableClose]="true"
107110
cdkAttachPopoverAsChild
108111
>
109112
<div ngMenu #editMenu="ngMenu">
@@ -166,6 +169,7 @@
166169
[cdkConnectedOverlayOpen]="true"
167170
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
168171
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
172+
[cdkConnectedOverlayDisableClose]="true"
169173
cdkAttachPopoverAsChild
170174
>
171175
<div ngMenu #viewMenu="ngMenu">
@@ -216,6 +220,7 @@
216220
[cdkConnectedOverlayOpen]="true"
217221
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
218222
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
223+
[cdkConnectedOverlayDisableClose]="true"
219224
cdkAttachPopoverAsChild
220225
>
221226
<div ngMenu #insertMenu="ngMenu">
@@ -230,6 +235,7 @@
230235
[cdkConnectedOverlayOpen]="!!insertItem.expanded()"
231236
[cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
232237
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
238+
[cdkConnectedOverlayDisableClose]="true"
233239
cdkAttachPopoverAsChild
234240
>
235241
<div ngMenu #imageMenu="ngMenu">
@@ -267,6 +273,7 @@
267273
[cdkConnectedOverlayOpen]="!!insertItem.expanded()"
268274
[cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
269275
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
276+
[cdkConnectedOverlayDisableClose]="true"
270277
cdkAttachPopoverAsChild
271278
>
272279
<div ngMenu #chartMenu="ngMenu">
@@ -317,6 +324,7 @@
317324
[cdkConnectedOverlayOpen]="true"
318325
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
319326
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
327+
[cdkConnectedOverlayDisableClose]="true"
320328
cdkAttachPopoverAsChild
321329
>
322330
<div ngMenu #formatMenu="ngMenu">
@@ -331,6 +339,7 @@
331339
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
332340
[cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
333341
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
342+
[cdkConnectedOverlayDisableClose]="true"
334343
cdkAttachPopoverAsChild
335344
>
336345
<div ngMenu #textMenu="ngMenu">
@@ -370,6 +379,7 @@
370379
[cdkConnectedOverlayOpen]="!!textItem.expanded()"
371380
[cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
372381
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
382+
[cdkConnectedOverlayDisableClose]="true"
373383
cdkAttachPopoverAsChild
374384
>
375385
<div ngMenu #sizeMenu="ngMenu">
@@ -400,6 +410,7 @@
400410
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
401411
[cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
402412
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
413+
[cdkConnectedOverlayDisableClose]="true"
403414
cdkAttachPopoverAsChild
404415
>
405416
<div ngMenu #paragraphMenu="ngMenu">
@@ -421,6 +432,7 @@
421432
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
422433
[cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
423434
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
435+
[cdkConnectedOverlayDisableClose]="true"
424436
cdkAttachPopoverAsChild
425437
>
426438
<div ngMenu #alignMenu="ngMenu">

‎src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
[cdkConnectedOverlayOpen]="true"
1515
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
1616
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
17+
[cdkConnectedOverlayDisableClose]="true"
1718
cdkAttachPopoverAsChild
1819
>
1920
<div ngMenu #fileMenu="ngMenu">
@@ -47,6 +48,7 @@
4748
[cdkConnectedOverlayOpen]="!!fileItem.expanded()"
4849
[cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
4950
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
51+
[cdkConnectedOverlayDisableClose]="true"
5052
cdkAttachPopoverAsChild
5153
>
5254
<div ngMenu #shareMenu="ngMenu">
@@ -104,6 +106,7 @@
104106
[cdkConnectedOverlayOpen]="true"
105107
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
106108
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
109+
[cdkConnectedOverlayDisableClose]="true"
107110
cdkAttachPopoverAsChild
108111
>
109112
<div ngMenu #editMenu="ngMenu">
@@ -166,6 +169,7 @@
166169
[cdkConnectedOverlayOpen]="true"
167170
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
168171
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
172+
[cdkConnectedOverlayDisableClose]="true"
169173
cdkAttachPopoverAsChild
170174
>
171175
<div ngMenu #viewMenu="ngMenu">
@@ -216,6 +220,7 @@
216220
[cdkConnectedOverlayOpen]="true"
217221
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
218222
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
223+
[cdkConnectedOverlayDisableClose]="true"
219224
cdkAttachPopoverAsChild
220225
>
221226
<div ngMenu #insertMenu="ngMenu">
@@ -230,6 +235,7 @@
230235
[cdkConnectedOverlayOpen]="!!insertItem.expanded()"
231236
[cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
232237
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
238+
[cdkConnectedOverlayDisableClose]="true"
233239
cdkAttachPopoverAsChild
234240
>
235241
<div ngMenu #imageMenu="ngMenu">
@@ -267,6 +273,7 @@
267273
[cdkConnectedOverlayOpen]="!!insertItem.expanded()"
268274
[cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
269275
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
276+
[cdkConnectedOverlayDisableClose]="true"
270277
cdkAttachPopoverAsChild
271278
>
272279
<div ngMenu #chartMenu="ngMenu">
@@ -317,6 +324,7 @@
317324
[cdkConnectedOverlayOpen]="true"
318325
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
319326
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
327+
[cdkConnectedOverlayDisableClose]="true"
320328
cdkAttachPopoverAsChild
321329
>
322330
<div ngMenu #formatMenu="ngMenu">
@@ -331,6 +339,7 @@
331339
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
332340
[cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
333341
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
342+
[cdkConnectedOverlayDisableClose]="true"
334343
cdkAttachPopoverAsChild
335344
>
336345
<div ngMenu #textMenu="ngMenu">
@@ -370,6 +379,7 @@
370379
[cdkConnectedOverlayOpen]="!!textItem.expanded()"
371380
[cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
372381
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
382+
[cdkConnectedOverlayDisableClose]="true"
373383
cdkAttachPopoverAsChild
374384
>
375385
<div ngMenu #sizeMenu="ngMenu">
@@ -400,6 +410,7 @@
400410
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
401411
[cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
402412
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
413+
[cdkConnectedOverlayDisableClose]="true"
403414
cdkAttachPopoverAsChild
404415
>
405416
<div ngMenu #paragraphMenu="ngMenu">
@@ -421,6 +432,7 @@
421432
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
422433
[cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
423434
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
435+
[cdkConnectedOverlayDisableClose]="true"
424436
cdkAttachPopoverAsChild
425437
>
426438
<div ngMenu #alignMenu="ngMenu">

‎src/components-examples/aria/menubar/menubar/menubar-example.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
[cdkConnectedOverlayOpen]="true"
1515
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
1616
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
17+
[cdkConnectedOverlayDisableClose]="true"
1718
cdkAttachPopoverAsChild
1819
>
1920
<div ngMenu #fileMenu="ngMenu">
@@ -47,6 +48,7 @@
4748
[cdkConnectedOverlayOpen]="!!fileItem.expanded()"
4849
[cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
4950
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
51+
[cdkConnectedOverlayDisableClose]="true"
5052
cdkAttachPopoverAsChild
5153
>
5254
<div ngMenu #shareMenu="ngMenu">
@@ -104,6 +106,7 @@
104106
[cdkConnectedOverlayOpen]="true"
105107
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
106108
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
109+
[cdkConnectedOverlayDisableClose]="true"
107110
cdkAttachPopoverAsChild
108111
>
109112
<div ngMenu #editMenu="ngMenu">
@@ -166,6 +169,7 @@
166169
[cdkConnectedOverlayOpen]="true"
167170
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
168171
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
172+
[cdkConnectedOverlayDisableClose]="true"
169173
cdkAttachPopoverAsChild
170174
>
171175
<div ngMenu #viewMenu="ngMenu">
@@ -216,6 +220,7 @@
216220
[cdkConnectedOverlayOpen]="true"
217221
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
218222
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
223+
[cdkConnectedOverlayDisableClose]="true"
219224
cdkAttachPopoverAsChild
220225
>
221226
<div ngMenu #insertMenu="ngMenu">
@@ -230,6 +235,7 @@
230235
[cdkConnectedOverlayOpen]="!!insertItem.expanded()"
231236
[cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
232237
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
238+
[cdkConnectedOverlayDisableClose]="true"
233239
cdkAttachPopoverAsChild
234240
>
235241
<div ngMenu #imageMenu="ngMenu">
@@ -267,6 +273,7 @@
267273
[cdkConnectedOverlayOpen]="!!insertItem.expanded()"
268274
[cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
269275
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
276+
[cdkConnectedOverlayDisableClose]="true"
270277
cdkAttachPopoverAsChild
271278
>
272279
<div ngMenu #chartMenu="ngMenu">
@@ -317,6 +324,7 @@
317324
[cdkConnectedOverlayOpen]="true"
318325
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
319326
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6}]"
327+
[cdkConnectedOverlayDisableClose]="true"
320328
cdkAttachPopoverAsChild
321329
>
322330
<div ngMenu #formatMenu="ngMenu">
@@ -331,6 +339,7 @@
331339
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
332340
[cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
333341
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
342+
[cdkConnectedOverlayDisableClose]="true"
334343
cdkAttachPopoverAsChild
335344
>
336345
<div ngMenu #textMenu="ngMenu">
@@ -370,6 +379,7 @@
370379
[cdkConnectedOverlayOpen]="!!textItem.expanded()"
371380
[cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
372381
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
382+
[cdkConnectedOverlayDisableClose]="true"
373383
cdkAttachPopoverAsChild
374384
>
375385
<div ngMenu #sizeMenu="ngMenu">
@@ -400,6 +410,7 @@
400410
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
401411
[cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
402412
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
413+
[cdkConnectedOverlayDisableClose]="true"
403414
cdkAttachPopoverAsChild
404415
>
405416
<div ngMenu #paragraphMenu="ngMenu">
@@ -421,6 +432,7 @@
421432
[cdkConnectedOverlayOpen]="!!formatItem.expanded()"
422433
[cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
423434
[cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
435+
[cdkConnectedOverlayDisableClose]="true"
424436
cdkAttachPopoverAsChild
425437
>
426438
<div ngMenu #alignMenu="ngMenu">

0 commit comments

Comments
 (0)