diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 86cdbfbadd9c..ffee532f5328 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -211,7 +211,10 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { /** Stream of clicks outside of the autocomplete panel. */ private get _outsideClickStream(): Observable { if (this._document) { - return Observable.fromEvent(this._document, 'click').filter((event: MouseEvent) => { + return Observable.merge( + Observable.fromEvent(this._document, 'click'), + Observable.fromEvent(this._document, 'touchend') + ).filter((event: MouseEvent | TouchEvent) => { const clickTarget = event.target as HTMLElement; const inputContainer = this._inputContainer ? this._inputContainer._elementRef.nativeElement : null; @@ -442,4 +445,3 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { } } - diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 422456f40bd4..cb0926192a2c 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -146,7 +146,7 @@ describe('MdAutocomplete', () => { }); })); - it('should close the panel when input loses focus', async(() => { + it('should close the panel when the user clicks away', async(() => { dispatchFakeEvent(input, 'focusin'); fixture.detectChanges(); @@ -160,6 +160,20 @@ describe('MdAutocomplete', () => { }); })); + it('should close the panel when the user taps away on a touch device', async(() => { + dispatchFakeEvent(input, 'focus'); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + dispatchFakeEvent(document, 'touchend'); + + expect(fixture.componentInstance.trigger.panelOpen) + .toBe(false, `Expected tapping outside the panel to set its state to closed.`); + expect(overlayContainerElement.textContent) + .toEqual('', `Expected tapping outside the panel to close the panel.`); + }); + })); + it('should close the panel when an option is clicked', async(() => { dispatchFakeEvent(input, 'focusin'); fixture.detectChanges();