fix(autocomplete): unable to click to select items in IE

* Fixes being unable to select autocomplete items by clicking in IE. This was due to IE not setting the `event.relatedTarget` for blur events.
* Fixes potential issue if the user uses `mat-option`, instead of `md-option`.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -58,8 +58,8 @@ export const MD_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
     '[attr.aria-expanded]': 'panelOpen.toString()',
     '[attr.aria-owns]': 'autocomplete?.id',
     '(focus)': 'openPanel()',
-    '(blur)': '_handleBlur($event.relatedTarget?.tagName)',
     '(input)': '_handleInput($event)',
+    '(focusout)': '_handleFocusOut($event)',
     '(keydown)': '_handleKeydown($event)',
   },
   providers: [MD_AUTOCOMPLETE_VALUE_ACCESSOR]
@@ -220,11 +220,17 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     }
   }
 
-  _handleBlur(newlyFocusedTag: string): void {
+  /**
+   * Handles the input element losing focus. Note that this should be handled on `focusout`,
+   * instead of `blur`, because IE doesn't set the `relatedTarget` for blur events.
+   */
+  _handleFocusOut(event: FocusEvent): void {
+    const relatedTarget = event.relatedTarget as HTMLElement;
+
     this._onTouched();
 
-    // Only emit blur event if the new focus is *not* on an option.
-    if (newlyFocusedTag !== 'MD-OPTION') {
+    // Only emit blur event if the new focus is *not* on an element inside the panel.
+    if (relatedTarget && !this._overlayRef.overlayElement.contains(relatedTarget)) {
       this._blurStream.next(null);
     }
   }

src/lib/autocomplete/autocomplete.spec.ts

@@ -96,7 +96,7 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
-        dispatchFakeEvent(input, 'blur');
+        dispatchFakeEvent(input, 'focusout', { relatedTarget: document.body });
         fixture.detectChanges();
 
         expect(fixture.componentInstance.trigger.panelOpen)
@@ -469,7 +469,7 @@ describe('MdAutocomplete', () => {
       expect(fixture.componentInstance.stateCtrl.touched)
           .toBe(false, `Expected control to start out untouched.`);
 
-      dispatchFakeEvent(input, 'blur');
+      dispatchFakeEvent(input, 'focusout');
       fixture.detectChanges();
 
       expect(fixture.componentInstance.stateCtrl.touched)

src/lib/core/testing/dispatch-events.ts

@@ -5,8 +5,8 @@ import {
 } from './event-objects';
 
 /** Shorthand to dispatch a fake event on a specified node. */
-export function dispatchFakeEvent(node: Node, type: string) {
-  node.dispatchEvent(createFakeEvent(type));
+export function dispatchFakeEvent(node: Node, type: string, eventProps?: any) {
+  node.dispatchEvent(createFakeEvent(type, eventProps));
 }
 
 /** Shorthand to dispatch a keyboard event with a specified key code. */

src/lib/core/testing/event-objects.ts

@@ -1,3 +1,5 @@
+import {extendObject} from '../util/object-extend';
+
 /** Creates a browser MouseEvent with the specified options. */
 export function createMouseEvent(type: string, x = 0, y = 0) {
   let event = document.createEvent('MouseEvent');
@@ -39,8 +41,8 @@ export function createKeyboardEvent(type: string, keyCode: number) {
 }
 
 /** Creates a fake event object with any desired event type. */
-export function createFakeEvent(type: string) {
-  let event  = document.createEvent('Event');
+export function createFakeEvent(type: string, eventProps?: any) {
+  let event = extendObject(document.createEvent('Event'), eventProps);
   event.initEvent(type, true, true);
   return event;
 }