angular / angular/components

bug(CdkMenu): Selectable menu items (radio/checkbox) don't stay open when spacebar used

オープン
#27,818 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: cdk/menu P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

From looking at the cdk/menu code, it seems the intention is for the menu to stay open when selectable menu items (cdkMenuItemRadio/cdkMenuItemCheckbox) are clicked with a CTRL modifier, or if the user uses the space bar.

https://github.com/angular/components/blob/main/src/cdk/menu/menu-item.ts#L194

This doesn't seem to be working (even in the online examples), unless I'm missing something?

https://material.angular.io/cdk/menu/examples

### Reproduction

StackBlitz link: https://components-issue-aea5jm.stackblitz.io
Steps to reproduce:
1. Focus menu button
2. Open menu with ENTER
3. Navigate to one of the buttons (note that they are all MenuItemRadio's)
4. Press SPACE

### Expected Behavior

Menu closes

### Actual Behavior

MenuItemCheckbox should keep the menu open.

### Environment

Latest (based on CDK docs).

---

Angular CLI: 16.1.5
Node: 18.10.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 16.1.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.5
@angular-devkit/build-angular 16.1.5
@angular-devkit/core 16.1.5
@angular-devkit/schematics 16.1.5
@angular/cdk 16.1.5
@angular/cli 16.1.5
@angular/flex-layout 13.0.0-beta.38
@angular/material 16.1.5
@schematics/angular 16.1.5
rxjs 7.8.1
typescript 5.1.6
webpack 5.86.0
zone.js 0.13.0

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with src/cdk/menu/menu-item.ts around line 194, then reproduce the keyboard interaction in the linked StackBlitz or CDK menu examples. Clarify whether Space should close or keep the menu open for radio and checkbox items, then verify the selected-item behavior matches that decision.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。