Components: Keyboard control is unpredictable within mat-chip-list

Created on 9 Oct 2018  路  3Comments  路  Source: angular/components

Bug, feature request, or proposal:

Arrow keys cannot be used to predictably navigate through a mat-chip-list.

What is the expected behavior?

Should behave like a list of options. An arrow key down/right focuses you onto the next chip. An arrow key left/up focuses you onto the previous chip.

What is the current behavior?

In a list of 2 or more chips: If you press the right arrow when focused on the first chip, the focus will move to the second chip. If you press the right arrow again the focus will move back to the first chip. Sometimes the focus does not change.

What are the steps to reproduce?

This is the default chips input example that shows this issue occurring when tabbed onto the first chip.
StackBlitz

What is the use-case or motivation for changing an existing behavior?

Better keyboard usability and general A11y support. Voice over on mac currently show the user that they can control+option+arrow_keys to change focus, this works, but still requires a modifier.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested in Chrome: Version 68.0.3440.106 (Official Build) (64-bit)
Angular: 6.1.9
Material: 6.4.7

Is there anything else we should know?

Most helpful comment

There was an issue where focus was being reset to the first chip when it's moved using the arrow keys. It was fixed by https://github.com/angular/material2/pull/12987 which was released in 7.0.0-beta.2.

All 3 comments

There was an issue where focus was being reset to the first chip when it's moved using the arrow keys. It was fixed by https://github.com/angular/material2/pull/12987 which was released in 7.0.0-beta.2.

Closing since it's fixed in master.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings