From eecf8976d6b9a607dfb028e6c1227ef53b1cb416 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 22 May 2017 23:57:59 +0200 Subject: [PATCH] fix(autocomplete): restore focus to input when click on option (#4702) Restores focus to the autocomplete input when an option is clicked, instead of dumping it into the body. Fixes #4645. --- src/lib/autocomplete/autocomplete-trigger.ts | 1 + src/lib/autocomplete/autocomplete.spec.ts | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index c942146da052..cb675d1fc9e3 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -339,6 +339,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { this._clearPreviousSelectedOption(event.source); this._setTriggerValue(event.source.value); this._onChange(event.source.value); + this._element.nativeElement.focus(); } this.closePanel(); diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 015f80eb166a..3da5ea9552fc 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -878,6 +878,22 @@ describe('MdAutocomplete', () => { }); + it('should restore focus to the input when clicking to select a value', async(() => { + fixture.componentInstance.trigger.openPanel(); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + const option = overlayContainerElement.querySelector('md-option') as HTMLElement; + + // Focus the option manually since the synthetic click may not do it. + option.focus(); + option.click(); + fixture.detectChanges(); + + expect(document.activeElement).toBe(input, 'Expected focus to be restored to the input.'); + }); + })); + }); describe('Fallback positions', () => {