fix(input): adds blur and focus event support (#449)

closes #337

Author: robertmesserle

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"

src/components/input/input.spec.ts

@@ -259,6 +259,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);
+        })();
+      });
+    });
   });
 }
 
@@ -407,3 +431,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) {}
+}

src/components/input/input.ts

@@ -13,13 +13,16 @@ import {
   ElementRef,
   QueryList,
   OnChanges,
+  EventEmitter,
+  Output,
 } from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor
 } from '@angular/common';
 import {BooleanFieldValue} from '../../core/annotations/field-value';
 import {MdError} from '../../core/errors/error';
+import {Observable} from 'rxjs/Observable';
 
 
 const noop = () => {};
@@ -142,6 +145,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);
@@ -165,17 +181,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();
   }