From 54cc6a0c31eb692a60582c9dfc97882f813ee5ba Mon Sep 17 00:00:00 2001
From: Robert Messerle <rmesserle@google.com>
Date: Mon, 16 May 2016 11:31:30 -0700
Subject: [PATCH] fix(input): adds blur and focus event support

closes #337
---
 src/components/input/input.html    |  6 ++---
 src/components/input/input.spec.ts | 36 ++++++++++++++++++++++++++++++
 src/components/input/input.ts      | 28 +++++++++++++++++++----
 3 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/src/components/input/input.html b/src/components/input/input.html
index d905b20ce6ce..ba2a7d09103d 100644
--- a/src/components/input/input.html
+++ b/src/components/input/input.html
@@ -18,10 +18,10 @@
              [spellcheck]="spellcheck"
              [attr.maxlength]="maxLength"
              [type]="type"
-             (focus)="onFocus()"
-             (blur)="onBlur()"
+             (focus)="handleFocus($event)"
+             (blur)="handleBlur($event)"
              [(ngModel)]="value"
-             (change)="onChange($event)">
+             (change)="handleChange($event)">
 
       <label class="md-input-placeholder"
              [attr.for]="id"
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index 9d4f393b4b8e..0f16f5e9928c 100644
--- a/src/components/input/input.spec.ts
+++ b/src/components/input/input.spec.ts
@@ -239,6 +239,30 @@ export function main() {
           expect(typeof fixture.componentInstance.value).toBe('number');
         });
     });
+
+    it('supports blur and focus events', () => {
+      return builder.createAsync(MdInputWithBlurAndFocusEvents).then(fixture => {
+        const testComponent = fixture.componentInstance;
+        const inputComponent = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
+        const fakeEvent = <FocusEvent>{};
+        fakeAsync(() => {
+          spyOn(testComponent, 'onFocus');
+          spyOn(testComponent, 'onBlur');
+
+          expect(testComponent.onFocus).not.toHaveBeenCalled();
+          expect(testComponent.onBlur).not.toHaveBeenCalled();
+
+          inputComponent.handleFocus(fakeEvent);
+          tick();
+          expect(testComponent.onFocus).toHaveBeenCalledWith(fakeEvent);
+
+
+          inputComponent.handleBlur(fakeEvent);
+          tick();
+          expect(testComponent.onBlur).toHaveBeenCalledWith(fakeEvent);
+        })();
+      });
+    });
   });
 }
 
@@ -387,3 +411,15 @@ class MdInputAriaTestController {
   ariaLabel: string = 'label';
   ariaDisabled: boolean = true;
 }
+
+@Component({
+  selector: 'test-input-controller',
+  template: `
+    <md-input (focus)="onFocus($event)" (blur)="onBlur($event)"></md-input>
+  `,
+  directives: [MdInput]
+})
+class MdInputWithBlurAndFocusEvents {
+  onBlur(event: FocusEvent) {}
+  onFocus(event: FocusEvent) {}
+}
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 104f63931e87..fb3fc0eac67e 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -13,6 +13,8 @@ import {
   ElementRef,
   QueryList,
   OnChanges,
+  EventEmitter,
+  Output,
 } from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
@@ -20,6 +22,7 @@ import {
 } from '@angular/common';
 import {BooleanFieldValue} from '../../core/annotations/field-value';
 import {MdError} from '../../core/errors/error';
+import {Observable} from 'rxjs/Observable';
 
 
 const noop = () => {};
@@ -144,6 +147,19 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   @Input() @BooleanFieldValue() spellcheck: boolean = false;
   @Input() type: string = 'text';
 
+  private _blurEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
+  private _focusEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
+
+  @Output('blur')
+  get onBlur(): Observable<FocusEvent> {
+    return this._blurEmitter.asObservable();
+  }
+
+  @Output('focus')
+  get onFocus(): Observable<FocusEvent> {
+    return this._focusEmitter.asObservable();
+  }
+
   get value(): any { return this._value; };
   @Input() set value(v: any) {
     v = this._convertValueForInputType(v);
@@ -167,17 +183,21 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   }
 
   /** @internal */
-  onFocus() {
+  handleFocus(event: FocusEvent) {
     this._focused = true;
+    this._focusEmitter.emit(event);
   }
+
   /** @internal */
-  onBlur() {
+  handleBlur(event: FocusEvent) {
     this._focused = false;
     this._onTouchedCallback();
+    this._blurEmitter.emit(event);
   }
+
   /** @internal */
-  onChange(ev: Event) {
-    this.value = (<HTMLInputElement>ev.target).value;
+  handleChange(event: Event) {
+    this.value = (<HTMLInputElement>event.target).value;
     this._onTouchedCallback();
   }