Seems like a Bug:
Angular Material select doesn't scroll to the relevant option on pressing a key the first time. It does so the second time.
What is the expected behavior?
When I press the first character of a value in a long list of dropdown options, it should scroll down the option whose first character matches the pressed character
What is the current behavior?
The first time a key is pressed, it doesn't navigate to the option whose first character matches the pressed key character.
What are the steps to reproduce?
https://stackblitz.com/edit/material2-select-scroll-problem In the above StackBlitz, open the dropdown, press 9. See that it doesn't navigate to the last option in the dropdown (although if you scroll down to it yourself, you can see that it's highlighted). Press 9 again. See that it navigates to the last option. It somehow navigates to the last key pressed. Eg if you press 4 next, it will scroll to the option 4 not when 4 is pressed but when next time any key is pressed after 4
What is the use-case or motivation for changing an existing behavior?
Goes against the existing dropdown / select UX and patterns
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular - version 4.4.3 / 4.4.4
Angular material - version 2.0.0-beta.12
Typescript - version 2.3.4
Browser - Google Chrome Version 65.0.3325.181
Note
Code can be found in the StackBlitz link above