Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(angular/autocomplete): add the ability to auto-select the active option while navigating #1222

Merged
merged 2 commits into from
Mar 1, 2022

Conversation

jeripeierSBB
Copy link
Collaborator

@jeripeierSBB jeripeierSBB commented Feb 28, 2022

Adds the autoSelectActiveOption input to sbb-autocomplete which allows the
consumer to opt into the behavior where the autocomplete will assign the active
option value as the user is navigating through the list. The value is only propagated
to the model once the panel is closed.

There are a couple of UX differences when the new option is enabled:

  1. If the user presses escape while there's a pending auto-selected option, the value
    is reverted to the last text they typed before they started navigating.
  2. If the user clicks away, tabs away or presses enter while there's a pending option,
    it will be selected.

The aforementioned UX differences are based on the Google search autocomplete and
one of the examples from the W3C here:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html

Closes #261

… option while navigating

Adds the `autoSelectActiveOption` input to `sbb-autocomplete` which allows the
consumer to opt into the behavior where the autocomplete will assign the active
option value as the user is navigating through the list. The value is only propagated
to the model once the panel is closed.

There are a couple of UX differences when the new option is enabled:
1. If the user presses escape while there's a pending auto-selected option, the value
is reverted to the last text they typed before they started navigating.
2. If the user clicks away, tabs away or presses enter while there's a pending option,
it will be selected.

The aforementioned UX differences are based on the Google search autocomplete and
one of the examples from the W3C here:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html
@jeripeierSBB
Copy link
Collaborator Author

Is that related to #261?

@github-actions
Copy link

Staging ready from daf068d at 28.2.2022, 11:00:25:

@github-actions
Copy link

github-actions bot commented Mar 1, 2022

Staging ready from fe1577c at 1.3.2022, 07:07:44:

Copy link
Collaborator

@kyubisation kyubisation left a comment

Choose a reason for hiding this comment

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

LGTM 👍

Copy link
Collaborator

@mhaertwig mhaertwig left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@jeripeierSBB jeripeierSBB merged commit 67985d0 into master Mar 1, 2022
@jeripeierSBB jeripeierSBB deleted the autocomplete-auto-select-first branch March 1, 2022 14:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature request: autocomplete with auto select first option on blur
3 participants