diff options
author | Chris Poucet <poucet@google.com> | 2021-12-02 20:02:08 +0100 |
---|---|---|
committer | Paladox none <thomasmulhall410@yahoo.com> | 2022-05-02 14:17:39 +0000 |
commit | a01b54d5c572abbd3f08ac2bf289bcb375c8adca (patch) | |
tree | 8051305c3f91ed4209279cb4e644eb2d06ca93bc | |
parent | c18424b4993817c533a6386ca54cb050bfb6ecd6 (diff) |
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); |