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

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.

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<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;
@@ -442,4 +445,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, '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();