angular / angular/components

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

Aperta
#21,375 3 commenti 4 reazioni 0 assegnatari Vedi su GitHub
area: material/select feature P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla riproduzione collegata di StackBlitz e analizza l’interazione da tastiera di Material Select e il comportamento dell’opzione attiva. Determina come un consumer potrebbe rendere manualmente attiva la prima opzione filtrata senza che il comportamento di ricerca predefinito la sovrascriva. Il lavoro è completo quando il comportamento richiesto è esposto in modo coerente e coperto per il caso d’uso del filtraggio personalizzato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.