angular / angular/components

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

Ouverte
#4,951 17 commentaires 13 réactions 0 personnes assignées Voir sur GitHub
area: material/autocomplete feature P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par examiner la pull request liée #4401 et la discussion existante de 17 commentaires afin de comprendre les choix de comportement non résolus. Suivez ensuite l’implémentation de Angular Material autocomplete depuis son point d’entrée de composant, puis déterminez si completion doit faire suivre la sélection au focus ou exposer une option pour ce comportement. Le travail est considéré comme terminé lorsque le comportement choisi est implémenté et vérifié pour une navigation avec les touches fléchées suivie de TAB, et que le flux ENTER existant est pris en compte.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.