docs: disable overlay close-on-escape in Aria menubar examples#69123
Open
Daherkarim wants to merge 1 commit into
Open
docs: disable overlay close-on-escape in Aria menubar examples#69123Daherkarim wants to merge 1 commit into
Daherkarim wants to merge 1 commit into
Conversation
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).
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 on angular.dev, the menus become permanently
unusable after this interaction:
Afterwards, several menus (e.g. Insert, Format) no longer open — 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 are always attached, so a detached overlay never reattaches
and its
viewChildreference becomesundefined. Holding Escape detaches theoverlays 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 acrossthe basic, disabled, and rtl menubar examples (and their material/retro
variants) — 9 files in total.
Notes
The same fix is being applied to the matching examples in
angular/components(the two example sets are maintained separately). Only example templates change.