Repository navigation
Conversation
…with space Checkbox and radio menu items are meant to keep the menu open when they're toggled with the space key. That only worked for non-native elements. For a native button, the keydown handler skips the event because the browser dispatches a click for it, and the click handler then triggered the item without keepOpen, closing the menu. Remember whether the keydown should keep the menu open and use it for the click the browser dispatches for that key. Mouse clicks still close the menu as before. Fixes angular#27818
This branch has not been deployed
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
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.
Fixes #27818
CdkMenuItemSelectablesetscloseOnSpacebarTrigger = falseso checkbox/radio items keep the menu open when toggled with Space. That only kicks in on the keydown path, though. For a native<button>(which is what the docs examples use),_onKeydownskips Space/Enter becauseeventDispatchesNativeClicksays the browser will dispatch a click. That click then goes through_handleClick→trigger()with nokeepOpen, so the menu closes anyway.The keydown handler now stores whether that key should keep the menu open before letting the native click through, and
_handleClickuses it for the click that follows. I only honour it for clicks withdetail === 0(what the browser dispatches for keyboard activation), so a stale flag can't make a later mouse click keep the menu open. The flag is reset after every click.Nothing changes for non-native items (they never got the native click and already used
keepOpen), for Enter, or for mouse clicks.Tests
Unit tests can't produce a trusted keydown, so the new specs call
_onKeydownwith a trusted-looking event and then dispatch adetail: 0click, the same sequence the browser produces:Without the
menu-item.tschange, both Space specs fail withExpected spy closeAll not to have been called.Manual check
I also checked with real key presses through Playwright, using a
cdkMenuTriggerFormenu with<button cdkMenuItemCheckbox>/<button cdkMenuItemRadio>items like the docs example (CDK 22.2.6, then the same build with this change). Steps: open the menu with Enter, ArrowDown to "Italic", press Space.In all three, Italic gets toggled either way. With the change, Enter on an item and a mouse click on an item still close the menu.
Before:
After: