angular / angular/components

feat(CdkMenu): Option to disable typeahead in CdkMenu

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

説明

### Feature Description

We would like to add an option in the `CdkMenu` to disable the integrated TypeAhead feature.

Currently, the menu activates the TypeAhead for its `FocusKeyManager` automatically:
https://github.com/angular/components/blob/e91d5091bbf3d44cc168be458269d260a0c22c27/src/cdk/menu/menu-base.ts#L175

The proposal would be to add an input like `cdkMenuTypeAhead: boolean` which defaults to true but can be used to skip the TypeAhead activation:
```ts
this.keyManager = new FocusKeyManager(this.items).withWrap().withHomeAndEnd();
if (this.cdkMenuTypeAhead) {
this.keyManager = this.keyManager.withTypeAhead()
}
```

#### Alternative

An alternative approach might be a combination of the following features, so the described use case can be accomplished by the `CdkMenu` itself.
1. Make the current search term (`_pressedLetters`) publicly available, so it can be displayed.
2. Two variants to extend the current search logic:
2.a Add a secondary `includes` search to the current `startsWith`.
2.b Make the search logic customizable with configurable predicate function.

### Use Case

The use case is a custom search feature for our menus, which conflicts with the integrated TypeAhead.
We want to display the current search term and search by `startsWith` & `includes`.

![Image](https://github.com/user-attachments/assets/9a9823aa-e645-4c02-98c8-71e8361e8178) ![Image](https://github.com/user-attachments/assets/be067fd8-0133-498d-a702-b3534632be16)

***

**🗨 I would appreciate some feedback, if this feature has a chance of being accepted. Then I can prepare a PR for this.**

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

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

調査の方向性

src/cdk/menu/menu-base.ts の、リンクされた行付近にある FocusKeyManager のセットアップから開始し、CdkMenu の入力がどのように宣言され、typeahead がどのように有効化されるかを追ってください。メニューで typeahead を無効にでき、現在のデフォルト動作を維持できれば変更は完了です。可能であれば既存のメニューテストを確認して、両方の経路を検証してください。

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

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

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

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