fix(autocomplete): not closing when tapping away on mobile

Currently the autocomplete panel won't close when tapping away on iOS, because the browser doesn't fire the click event on anything that it doesn't consider clickable. These changes add a `touchend` listener that will handle the functionality on mobile.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -206,7 +206,10 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   /** Stream of clicks outside of the autocomplete panel. */
   private get _outsideClickStream(): Observable<any> {
     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;
@@ -435,4 +438,3 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   }
 
 }
-

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, 'focus');
       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, 'focus');
       fixture.detectChanges();