feat(input): add focus function on host element (#407)

angular · May 10, 2016 · 0323844 · zoechi · Aug 21, 2016 · 0323844
1 parent 523929c
commit 0323844
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/components/input/input.html b/src/components/input/input.html
@@ -1,4 +1,4 @@
-<div class="md-input-wrapper" (click)="input.focus()">
+<div class="md-input-wrapper">
   <div class="md-input-table">
     <div class="md-input-prefix"><ng-content select="[md-prefix]"></ng-content></div>
 

diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -9,6 +9,8 @@ import {
   ContentChild,
   SimpleChange,
   ContentChildren,
+  ViewChild,
+  ElementRef,
   QueryList,
   OnChanges,
 } from '@angular/core';
@@ -94,6 +96,7 @@ export class MdHint {
   templateUrl: 'components/input/input.html',
   styleUrls: ['components/input/input.css'],
   providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
+  host: {'(click)' : 'focus()'}
 })
 export class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges {
   private _focused: boolean = false;
@@ -155,6 +158,14 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   // Input though, so we use HostBinding.
   @HostBinding('attr.align') private get _align(): any { return null; }
 
+
+  @ViewChild('input') private _inputElement: ElementRef;
+
+  /** Set focus on input */
+  focus() {
+    this._inputElement.nativeElement.focus();
+  }
+
   /** @internal */
   onFocus() {
     this._focused = true;