angular / angular/components

Autocomplete: when using the keyboard to navigate the options, the currently focused item should be the 'selected' option

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

Descrizione

#### Bug, feature request, or proposal:
Feature request

#### What is the expected behavior?
When using the keyboard to navigate through the options, as the focus changes from one option to another, the selected option should be the currently focused option, thus following the "selection follow focus" principle as stated in the Material docs [here](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus).

If the desire is to leave the current behavior then at least provide an option to turn this behavior on.

#### What is the current behavior?
Using the keyboard to navigate the options does not automatically update the 'selected' option.

#### What is the use-case or motivation for changing an existing behavior?
Many users expect to be able to select an option by simply navigating the options without being required to press a particular key to indicate their selection. By simply leaving the current control after having navigating to a particular option, they assume that they have selected the option as well. The main example I have for this is using the TAB key. I often navigate options using the arrow key and then press the TAB key after having 'selected' my option using the arrow keys. The current behavior is such that you are required to 'select' the option using the ENTER key, otherwise the value is not set when you TAB away from the control.

Google's own search engine follows this principle. As you type in your search, Google begins searching for the phrase and provides several autocomplete phrases for you. If you navigate the provided phrases, the search results update based on the currently focused phrase without having pressed ENTER or another key.

#### Is there anything else we should know?
See [this](https://github.com/angular/material2/pull/4401) pull request for the initial discussion.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia esaminando la pull request collegata #4401 e la discussione esistente di 17 commenti per comprendere le scelte di comportamento ancora irrisolte. Traccia quindi l’implementazione di Angular Material autocomplete dal relativo punto di ingresso del componente, poi determina se completion debba fare in modo che il focus segua la selezione oppure esporre un’opzione per questo comportamento. Il lavoro è completato quando il comportamento scelto è implementato e verificato per la navigazione con i tasti freccia seguita da TAB e il flusso ENTER esistente è stato affrontato.

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

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
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.