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

[Autocomplete] Enter key blocked after selecting option with keyboard #5976

Closed
kxlow opened this issue Jul 23, 2017 · 1 comment · Fixed by #5977
Closed

[Autocomplete] Enter key blocked after selecting option with keyboard #5976

kxlow opened this issue Jul 23, 2017 · 1 comment · Fixed by #5977
Assignees

Comments

@kxlow
Copy link

kxlow commented Jul 23, 2017

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Enter button should not be blocked after selecting an option from an autocomplete with the keyboard.

What is the current behavior?

After selecting an option from an autocomplete with the keyboard, pressing the enter key will do nothing until the input is refocused or additional input is added/removed.

What are the steps to reproduce?

http://plnkr.co/edit/Y2jIsqbrStiPguHUp0B4?p=preview

  1. Focus the input
  2. Press up or down arrow keys to activate the autocomplete panel.
  3. Press up or down arrow keys to select an option.
  4. Press enter. You will see the option in the input field.
  5. Press enter again. Nothing will happen because it is blocked.

Additionally:
6. Add some extra text, or select an option from the autocomplete using the mouse.
7. Press enter. A message will appear stating how many times the enter key has been pressed.

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

Pressing the enter key after selecting an option for the keyboard should not be blocked, as to allow form submission and such.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material: Latest master (374aaff)

Is there anything else we should know?

I narrowed it down to this block of code.
https://github.com/angular/material2/blob/374aaffa83b94cd154a6bfcf7391b34c24282d52/src/lib/autocomplete/autocomplete-trigger.ts#L299

  _handleKeydown(event: KeyboardEvent): void {
    if (event.keyCode === ESCAPE && this.panelOpen) {
      this.closePanel();
    } else if (this.activeOption && event.keyCode === ENTER) {
      this.activeOption._selectViaInteraction();
      this._resetActiveItem(); // <---- added this line to fix
                               // resets activeOption for the next time enter is pressed,
                               // and won't fall into this block
      event.preventDefault();
    } else {
      ...
    }
  }

I was able to fix the issue by adding the labeled line to reset the active item after making a selection through keyboard. I'm not sure if that's the proper way to go about fixing it, but just throwing that out there.

@crisbeto crisbeto self-assigned this Jul 23, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 23, 2017
Currently the autocomplete will always prevented the default enter key action, even if the panel is closed, which goes against the native behavior.

Fixes angular#5976.
andrewseguin pushed a commit that referenced this issue Jul 27, 2017
…sed (#5977)

Currently the autocomplete will always prevented the default enter key action, even if the panel is closed, which goes against the native behavior.

Fixes #5976.
@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 Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants