angular / angular/components

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

Open
#21,375 3 comments 4 reactions 0 assignees View on GitHub
area: material/select feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect Material Select's keyboard interaction and active-option behavior. Determine how a consumer could manually make the first filtered option active without the default search behavior overriding it. Done means the requested behavior is exposed consistently and covered for the custom filtering use case.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.