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(material/autocomplete): add the ability to auto-select the active option while navigating #20699

Merged
merged 1 commit into from
Feb 25, 2022

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Oct 1, 2020

Adds the autoSelectActiveOption input to mat-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

demo

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: minor This PR is targeted for the next minor release labels Oct 1, 2020
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 1, 2020
@crisbeto crisbeto force-pushed the autocomplete-auto-select branch 2 times, most recently from b905ccb to 183b199 Compare October 5, 2020 15:07
@jelbourn
Copy link
Member

jelbourn commented Oct 8, 2020

Overall looks good. Could we also add this option to MatAutocompleteDefaultOptions?

@Totati
Copy link
Contributor

Totati commented Oct 9, 2020

Overall looks good. Could we also add this option to MatAutocompleteDefaultOptions?

Hi, he added it :)
https://github.com/angular/components/pull/20699/files#diff-c584c9b0de57f44162cd166185db2d41R79

@jelbourn
Copy link
Member

jelbourn commented Oct 9, 2020

I somehow glossed right over that

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

LGTM

@jelbourn jelbourn added the action: merge The PR is ready for merge by the caretaker label Oct 9, 2020
@jelbourn
Copy link
Member

jelbourn commented Oct 9, 2020

@crisbeto just needs a rebase

@crisbeto crisbeto force-pushed the autocomplete-auto-select branch from 183b199 to ba613eb Compare October 9, 2020 18:18
@crisbeto crisbeto force-pushed the autocomplete-auto-select branch from ba613eb to c8f2b3a Compare November 9, 2020 18:12
@crisbeto crisbeto force-pushed the autocomplete-auto-select branch from c8f2b3a to 7998f3a Compare December 6, 2020 15:50
@crisbeto crisbeto force-pushed the autocomplete-auto-select branch from 7998f3a to 6d5c3b9 Compare April 24, 2021 11:58
@zarend
Copy link
Contributor

zarend commented Jul 29, 2021

Hi @crisbeto , could you please resolve the merge conflict so I can run a fresh presubmit for this. I couldn't find the previous presubmit. This looks to me like it should be safe because the option we added is off by default 🤞 .

@crisbeto
Copy link
Member Author

Rebased.

@crisbeto crisbeto force-pushed the autocomplete-auto-select branch from 6d5c3b9 to 716fdec Compare July 29, 2021 21:06
@crisbeto crisbeto requested a review from a team as a code owner July 29, 2021 21:06
@zarend
Copy link
Contributor

zarend commented Jul 29, 2021

presubmit (internal)

@josephperrott josephperrott removed the request for review from a team August 10, 2021 18:38
@crisbeto crisbeto force-pushed the autocomplete-auto-select branch from 716fdec to 3d6a061 Compare September 7, 2021 20:48
@andrewseguin andrewseguin removed the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 28, 2021
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 29, 2021
@crisbeto crisbeto force-pushed the autocomplete-auto-select branch from 3d6a061 to 22534f4 Compare January 3, 2022 09:34
…e option while navigating

Adds the `autoSelectActiveOption` input to `mat-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
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants