docs(aria/menu): disable overlay close-on-escape in menubar examples#33344
Open
Daherkarim wants to merge 1 commit into
Open
docs(aria/menu): disable overlay close-on-escape in menubar examples#33344Daherkarim wants to merge 1 commit into
Daherkarim wants to merge 1 commit into
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What / Why
In the Aria menubar examples, the menus become permanently unusable after a
specific interaction:
After this, several menus (e.g. Insert, Format) no longer open at all —
neither on hover nor on click.
Root cause
Each menu is rendered in a
cdkConnectedOverlay, which detaches the top-mostoverlay on every Escape press (
disableClosedefaults tofalse).The top-level menus use
[cdkConnectedOverlayOpen]="true", so a detachedoverlay never reattaches and its
viewChildreference becomesundefined.Holding Escape detaches the overlays one by one, permanently breaking menus like
Insert and Format.
This isn't a CDK bug — close-on-Escape is intentional
cdkConnectedOverlaybehavior. The menu pattern should own open/close state, which is what the
combobox and toolbar examples already do via
cdkConnectedOverlayDisableClose.Fix
Add
[cdkConnectedOverlayDisableClose]="true"to the overlay templates in themenubar,menubar-disabled, andmenubar-rtlexamples, bringing them in linewith the other Aria-in-overlay examples.
Verification
Reproduced in the dev-app (
/aria-menubar) by driving the exact sequence in areal browser and inspecting the live menu state:
menus); Insert/Format end up with no submenu and do not open on click.
menubar item opens normally.
refocuses the menubar item, and toggle/reopen all work.
Only example templates changed (no library/TS changes), so existing unit tests
are unaffected.
Notes
Companion to the same fix in the official docs examples: angular/angular#69123.