Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(select): give focus to the first option when loaded asynchronously #11372

Merged

Conversation

marosoft
Copy link
Contributor

This is to fix a problem with loosing the focus and not allowing
the keys to navigate through the options displayed in the dropdown menu.

Fixes #11357

PR Checklist

Please check that your PR fulfills the following requirements:

  • The commit message follows our guidelines
  • Tests for the changes have been added or this is not a bug fix / enhancement
  • Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

While loading the options asynchronously the focus is on the spinner.
When completed, the spinner is removed together with the focus.
Because of it the arrow keys cause search to be run again rather than allowing navigation within dropdown menu.
Issue Number: #11357

What is the new behavior?

After all the options are loaded the first one is given the focus to allow the navigation
within the dropdown menu to match the behavior of when the options are provided statically.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

This is to fix a problem with loosing the focus and not allowing
the keys to navigate through the options displayed in the dropdown menu.

Fixes angular#11357
@googlebot googlebot added the cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ label Jul 14, 2018
@Splaktar Splaktar self-requested a review July 19, 2018 01:44
@Splaktar Splaktar self-assigned this Jul 19, 2018
@Splaktar Splaktar added type: bug a11y This issue is related to accessibility ux: polish P2: required Issues that must be fixed. labels Jul 19, 2018
@Splaktar Splaktar added this to the 1.1.11 milestone Jul 19, 2018
Copy link
Contributor

@Splaktar Splaktar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Manual tests look good as well! Thank you!

@Splaktar Splaktar added pr: merge ready This PR is ready for a caretaker to review pr: lgtm This PR has been approved by the reviewer labels Jul 19, 2018
@mmalerba mmalerba merged commit 998199f into angular:master Jul 29, 2018
@Splaktar Splaktar assigned mmalerba and unassigned josephperrott Jul 30, 2018
Splaktar pushed a commit that referenced this pull request Jul 31, 2018
#11372)

This is to fix a problem with loosing the focus and not allowing
the keys to navigate through the options displayed in the dropdown menu.

Fixes #11357
Splaktar pushed a commit that referenced this pull request Aug 2, 2018
#11372)

This is to fix a problem with loosing the focus and not allowing
the keys to navigate through the options displayed in the dropdown menu.

Fixes #11357
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y This issue is related to accessibility cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ P2: required Issues that must be fixed. pr: lgtm This PR has been approved by the reviewer pr: merge ready This PR is ready for a caretaker to review type: bug ux: polish
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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