angular / angular/components

feat(Material Select) - Way to set first option active manually

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

説明

#### Way to set first option as active manually in Material Select

The feature to let first option active in the options displayed using material select.
i.e. One should be able to manually/programmatically set the first option in the dropdown as active.

#### Use Case

While implementing search filter using Material Select component ( i.e. using an Input element within mat-select ) the active item toggles based on the default behaviour of keyboard interaction i.e. it sets the item active as per the matching character user has pressed on keyboard. This causes inconsistency while implementing custom filtering and may lead disturbance in the focus as per UX perspective.

The feature for manually setting the first option active can help resolve the above scenario.

Tried using `this.matSelect._keyManager.setFirstItemActive();` (matSelect is of type Material Select) but the default search behaviour causes inconsistency and sometimes option other than the first option gets active

**Sample demo for Drop Down Search using Material Select :**
https://stackblitz.com/edit/angular-ivy-q1bvhb

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

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

調査の方向性

リンクされた StackBlitz の再現から始め、Material Select のキーボード操作とアクティブなオプションの動作を調査します。デフォルトの検索動作によって上書きされることなく、consumer がフィルタリング後の最初のオプションを手動でアクティブにする方法を確認します。要求された動作が一貫して公開され、カスタムフィルタリングのユースケースについてカバーされていれば完了です。

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

評価

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

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

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