fix(input): add event emitters for blur and focus to the ion-input component

fixes #5487

Author: brandyscarney

ionic/components/input/input-base.ts

@@ -33,6 +33,8 @@ export class InputBase {
   @Input() clearInput;
   @Input() placeholder: string = '';
   @ViewChild(NativeInput) protected _native: NativeInput;
+  @Output() blur: EventEmitter<Event> = new EventEmitter;
+  @Output() focus: EventEmitter<Event> = new EventEmitter;
 
   constructor(
     config: Config,

ionic/components/input/input.ts

@@ -1,4 +1,4 @@
-import {Component, Optional, ElementRef} from 'angular2/core';
+import {Component, Optional, ElementRef, ViewChild} from 'angular2/core';
 import {NgIf, NgControl} from 'angular2/common';
 
 import {Button} from '../button/button';
@@ -65,7 +65,7 @@ import {Platform} from '../../platform/platform';
 @Component({
   selector: 'ion-input',
   template:
-    '<input [type]="type" [(ngModel)]="_value" [placeholder]="placeholder" class="text-input">' +
+    '<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' +
     '<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
     '<button clear *ngIf="clearInput && value" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
     '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
@@ -90,6 +90,20 @@ export class TextInput extends InputBase {
   ) {
     super(config, form, item, app, platform, elementRef, scrollView, nav, ngControl);
   }
+
+  /**
+   * @private
+   */
+  inputBlurred(event) {
+    this.blur.emit(event);
+  }
+
+  /**
+   * @private
+   */
+  inputFocused(event) {
+    this.focus.emit(event);
+  }
 }
 
 
@@ -134,7 +148,7 @@ export class TextInput extends InputBase {
 @Component({
   selector: 'ion-textarea',
   template:
-    '<textarea [(ngModel)]="_value" [placeholder]="placeholder" class="text-input"></textarea>' +
+    '<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input"></textarea>' +
     '<input type="text" aria-hidden="true" next-input *ngIf="_useAssist">' +
     '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
   directives: [
@@ -167,4 +181,18 @@ export class TextArea extends InputBase {
       this._item.setCssClass('item-textarea', true);
     }
   }
+
+  /**
+   * @private
+   */
+  inputBlurred(event) {
+    this.blur.emit(event);
+  }
+
+  /**
+   * @private
+   */
+  inputFocused(event) {
+    this.focus.emit(event);
+  }
 }

ionic/components/input/test/fixed-inline-labels/index.ts

@@ -1,13 +1,21 @@
-import {App} from 'ionic-angular';
+import {App, Page} from 'ionic-angular';
 
 
-@App({
+@Page({
   templateUrl: 'main.html'
 })
-class E2EApp {
+class PageOne {
   url;
+  input1: string = 'Text 1';
 
-  constructor() {
-    this.input1 = 'Text 1';
+  onEvent(event) {
+    console.log("Did Event:", event.type);
   }
 }
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = PageOne;
+}

ionic/components/input/test/fixed-inline-labels/main.html

@@ -9,7 +9,11 @@
 
     <ion-item>
       <ion-label fixed>To</ion-label>
-      <ion-input [(ngModel)]="input1"></ion-input>
+      <ion-input [(ngModel)]="input1"
+        (blur)="onEvent($event)"
+        (input)="onEvent($event)"
+        (focus)="onEvent($event)">
+      </ion-input>
     </ion-item>
 
     <ion-item>
@@ -29,7 +33,11 @@
 
     <ion-item>
       <ion-label fixed>Comments</ion-label>
-      <ion-textarea value="Comment value"></ion-textarea>
+      <ion-textarea value="Comment value"
+        (blur)="onEvent($event)"
+        (input)="onEvent($event)"
+        (focus)="onEvent($event)">
+      </ion-textarea>
     </ion-item>
 
     <ion-item>