refactor: switch over focus method calls to use the renderer (#2077)

Switches the calls to `focus` directly on the DOM node to use the Renderer instead. This should make it easier to start supporting Angular Universal, if we decide to at some point.

Author: crisbeto

src/lib/button-toggle/button-toggle.ts

@@ -5,6 +5,7 @@ import {
     ContentChildren,
     Directive,
     ElementRef,
+    Renderer,
     EventEmitter,
     HostBinding,
     Input,
@@ -306,7 +307,8 @@ export class MdButtonToggle implements OnInit {
 
   constructor(@Optional() toggleGroup: MdButtonToggleGroup,
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
-              public buttonToggleDispatcher: MdUniqueSelectionDispatcher) {
+              public buttonToggleDispatcher: MdUniqueSelectionDispatcher,
+              private _renderer: Renderer) {
     this.buttonToggleGroup = toggleGroup;
 
     this.buttonToggleGroupMultiple = toggleGroupMultiple;
@@ -435,7 +437,7 @@ export class MdButtonToggle implements OnInit {
   }
 
   focus() {
-    this._inputElement.nativeElement.focus();
+    this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
   }
 }
 

src/lib/button/button.ts

@@ -96,7 +96,7 @@ export class MdButton {
 
   /** TODO(hansl): e2e test this function. */
   focus() {
-    this._elementRef.nativeElement.focus();
+    this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus');
   }
 
   getHostElement() {

src/lib/checkbox/checkbox.ts

@@ -331,7 +331,7 @@ export class MdCheckbox implements ControlValueAccessor {
   }
 
   focus() {
-    this._inputElement.nativeElement.focus();
+    this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
     this._onInputFocus();
   }
 

src/lib/input/input.ts

@@ -10,6 +10,7 @@ import {
   ContentChildren,
   ViewChild,
   ElementRef,
+  Renderer,
   QueryList,
   OnChanges,
   EventEmitter,
@@ -237,7 +238,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
   _elementType: 'input' | 'textarea';
 
-  constructor(elementRef: ElementRef) {
+  constructor(elementRef: ElementRef, private _renderer: Renderer) {
     // Set the element type depending on normalized selector used(md-input / md-textarea)
     this._elementType = elementRef.nativeElement.nodeName.toLowerCase() === 'md-input' ?
         'input' :
@@ -246,7 +247,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
   /** Set focus on input */
   focus() {
-    this._inputElement.nativeElement.focus();
+    this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
   }
 
   _handleFocus(event: FocusEvent) {

src/lib/radio/radio.ts

@@ -4,6 +4,7 @@ import {
   ContentChildren,
   Directive,
   ElementRef,
+  Renderer,
   EventEmitter,
   HostBinding,
   Input,
@@ -294,6 +295,7 @@ export class MdRadioButton implements OnInit {
 
   constructor(@Optional() radioGroup: MdRadioGroup,
               private _elementRef: ElementRef,
+              private _renderer: Renderer,
               public radioDispatcher: MdUniqueSelectionDispatcher) {
     // Assertions. Ideally these should be stripped out by the compiler.
     // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
@@ -412,7 +414,7 @@ export class MdRadioButton implements OnInit {
   }
 
   focus() {
-    this._inputElement.nativeElement.focus();
+    this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
     this._onInputFocus();
   }
 

src/lib/slide-toggle/slide-toggle.ts

@@ -190,7 +190,7 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   }
 
   focus() {
-    this._inputElement.nativeElement.focus();
+    this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
     this._onInputFocus();
   }
 

src/lib/tabs/tab-label-wrapper.ts

@@ -1,17 +1,17 @@
-import {Directive, ElementRef} from '@angular/core';
+import {Directive, ElementRef, Renderer} from '@angular/core';
 
 
 /** Used in the `md-tab-group` view to display tab labels */
 @Directive({
   selector: '[md-tab-label-wrapper], [mat-tab-label-wrapper]'
 })
 export class MdTabLabelWrapper {
-  constructor(public elementRef: ElementRef) {}
+  constructor(public elementRef: ElementRef, private _renderer: Renderer) {}
 
   /**
    * Sets focus on the wrapper element
    */
   focus(): void {
-    this.elementRef.nativeElement.focus();
+    this._renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus');
   }
 }