fix(button): add the focus() method to buttons.

Fixes #510.
angular · Jun 6, 2016 · 7c497e6 · 7c497e6
1 parent bbd96e8
commit 7c497e6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
@@ -80,6 +80,10 @@ export class MdButton {
   removeKeyboardFocus() {
     this.isKeyboardFocused = false;
   }
+
+  focus() {
+    this.elementRef.nativeElement.focus();
+  }
 }
 
 @Component({

diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html
@@ -63,11 +63,14 @@
     <div>
       <p>isDisabled: {{isDisabled}}, clickCounter: <span id="clickCounter">{{clickCounter}}</span></p>
       <button md-raised-button (click)="isDisabled=!isDisabled" id="disableToggle">Disable buttons</button>
+      <button md-raised-button (click)="button1.focus()" id="disableToggle">Focus 1</button>
+      <button md-raised-button (click)="button2.focus()" id="disableToggle">Focus 2</button>
+      <button md-raised-button (click)="button3.focus()" id="disableToggle">Focus 3</button>
     </div>
-    <button md-button [disabled]="isDisabled" (click)="clickCounter=clickCounter+1" id="testButton">off</button>
+    <button md-button #button1 [disabled]="isDisabled" (click)="clickCounter=clickCounter+1" id="testButton">off</button>
     <button md-button color="primary" [disabled]="isDisabled">off</button>
-    <a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
-    <button md-raised-button color="primary" [disabled]="isDisabled">off</button>
+    <a href="http://www.google.com" #button2 md-button color="accent" [disabled]="isDisabled">off</a>
+    <button md-raised-button #button3 color="primary" [disabled]="isDisabled">off</button>
     <button md-mini-fab [disabled]="isDisabled">
       <md-icon class="md-24">check</md-icon>
     </button>