Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
When using the mouse and keyboard to navigate the mat-select's drop down there should be consistent behavior.
What is the current behavior?
After selecting an option from a select control with the mouse, keyboard navigation (i.e. up/down arrows) uses the initial value as a starting point rather than the value selected with the mouse.
If you use the keyboard to select a value then navigating with the keyboard again works as expected where the new value is the value before or after the selected value.
What are the steps to reproduce?
https://angular-material2-issue-bm7v2z.stackblitz.io
- Use the mouse to choose "Option 4" from the drop down.
- Tab off the field.
- Tab back onto the field.
- Press the down arrow key.
The selected option becomes "Option 2" where the expected behavior would be that it would continue from the current place in the drop down and the selected option would become "Option 5". When using only the keyboard this behavior works as expected.
When using reactive forms to set the value of the select control on page load, selecting a different option with the mouse, tabbing off, tabbing back on and pressing the down key will navigate to the value after the initial value and not the value selected by the mouse.
What is the use-case or motivation for changing an existing behavior?
If a user is using a mix of keyboard and mouse interactions the current behavior would not be expected as it differs from when only using the keyboard.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 6.0.3, Material 6.2.0, Windows 10, TypeScript 2.7.2, Browsers: Chrome, IE11