Fix the gr-autocomplete.

Don't listen to keys on the gr-autocomplete-dropdown, instead do the
right thing for item-selected in gr-autocomplete.ts

Bug: Issue 15887
Google-Bug-Id: b/207422954
Release-Notes: Fix the gr-autocomplete.
Change-Id: I5bb51bc54c817830a92c66f982863c13b5fa8497
(cherry picked from commit be1d4b5369b7ec5ee33de88ada85baa5c8906c34)

3 files changed, 25 insertions, 14 deletions

diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
index 8e84aa21e7..4be42d8714 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
@@ -235,12 +235,25 @@ export class GrAutocomplete extends PolymerElement {
   }
 
   _handleItemSelect(e: CustomEvent) {
-    // Let _handleKeydown deal with keyboard interaction.
-    if (e.detail.trigger !== 'click') {
-      return;
+    if (e.detail.trigger === 'click') {
+      this._selected = e.detail.selected;
+      this._commit();
+      e.stopPropagation();
+      e.preventDefault();
+    } else if (e.detail.trigger === 'enter') {
+      this._handleInputCommit();
+      e.stopPropagation();
+      e.preventDefault();
+    } else if (e.detail.trigger === 'tab') {
+      if (this.tabComplete) {
+        this._handleInputCommit(true);
+        e.stopPropagation();
+        e.preventDefault();
+        this.focus();
+      } else {
+        this._focused = false;
+      }
     }
-    this._selected = e.detail.selected;
-    this._commit();
   }
 
   get _inputElement() {
@@ -351,8 +364,7 @@ export class GrAutocomplete extends PolymerElement {
   }
 
   /**
-   * _handleKeydown used for key handling in the this.$.input AND all child
-   * autocomplete options.
+   * _handleKeydown used for key handling in the this.$.input.
    */
   _handleKeydown(e: KeyboardEvent) {
     this._focused = true;
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_html.ts b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_html.ts
index 62775aa64a..bdb65ea411 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_html.ts
@@ -113,7 +113,6 @@ export const htmlTemplate = html`
     horizontal-align="left"
     id="suggestions"
     on-item-selected="_handleItemSelect"
-    on-keydown="_handleKeydown"
     suggestions="[[_suggestions]]"
     role="listbox"
     index="[[_index]]"
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.ts b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.ts
index 7da7ed5905..3571bd294a 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.ts
@@ -515,7 +515,7 @@ suite('gr-autocomplete tests', () => {
       assert.equal(element._suggestions.length, 1);
     });
 
-    test('tab on suggestion, tabComplete = false', () => {
+    test('tab on suggestion, tabComplete = false', async () => {
       element._suggestions = [{name: 'sugar bombs'}];
       element._focused = true;
       // When tabComplete is false, do not focus.
@@ -528,14 +528,14 @@ suite('gr-autocomplete tests', () => {
         queryAndAssert(suggestionsEl(), 'li:first-child'),
         9,
         null,
-        'tab'
+        'Tab'
       );
-      flush();
+      await flush();
       assert.isFalse(commitSpy.called);
       assert.isFalse(element._focused);
     });
 
-    test('tab on suggestion, tabComplete = true', () => {
+    test('tab on suggestion, tabComplete = true', async () => {
       element._suggestions = [{name: 'sugar bombs'}];
       element._focused = true;
       // When tabComplete is true, focus.
@@ -548,9 +548,9 @@ suite('gr-autocomplete tests', () => {
         queryAndAssert(suggestionsEl(), 'li:first-child'),
         9,
         null,
-        'tab'
+        'Tab'
       );
-      flush();
+      await flush();
 
       assert.isTrue(commitSpy.called);
       assert.isTrue(element._focused);