Skip to content

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

@kxlow

Description

@kxlow

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions