select(async): arrow keys cause search to be run again rather than allowing navigation within dropdown

[Splaktar]

Bug, enhancement request, or proposal:

Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

https://codepen.io/Splaktar/pen/qKzOZB?editors=1010
https://material.angularjs.org/latest/demo/select

Detailed Reproduction Steps:

1. Click the select to open the async search dropdown
2. Press the arrow down button

What is the expected behavior?

The second option should be selected/focused.

What is the current behavior?

The dropdown panel is dismissed, a progress spinner appears, and a new dropdown panel is displayed without any change to which option is selected.

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

a11y and UX

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.7
• AngularJS Material: 1.1.10
• OS: macOS
• Browsers: Chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

Related to #11347

[marosoft]

@Splaktar I believe I found the source of the problem. autoFocus is invoked after showDropDown promise is resolved at: https://github.com/angular/material/blob/master/src/components/select/select.js#L1184.

The issue is that it should be invoked again for the async when all the options are loaded.
For me the best place to add it is just after info.dropDown.element.css(animator.toCss({transform: ''})); line: https://github.com/angular/material/blob/master/src/components/select/select.js#L1236

I tested it and it is working fine for me. The focus is on the first option now as it should be.

Please let me know if this looks good for you or the changes should be implemented differently.
I can create a PR.

[Splaktar]

@marosoft that sounds good, thank you! Please open the PR.