From a538cd4c5a58fd375e227451300d1fb5aab6ccf8 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 4 Dec 2016 15:19:12 +0100 Subject: [PATCH] chore: switch over focus method calls to use the renderer 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. --- src/lib/button-toggle/button-toggle.ts | 6 ++++-- src/lib/button/button.ts | 2 +- src/lib/checkbox/checkbox.ts | 2 +- src/lib/input/input.ts | 5 +++-- src/lib/radio/radio.ts | 4 +++- src/lib/slide-toggle/slide-toggle.ts | 2 +- src/lib/tabs/tab-label-wrapper.ts | 6 +++--- 7 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 1cbbb8c19f4d..73168904fb3f 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/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'); } } diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index 2303af30afbc..8e220e92cefd 100644 --- a/src/lib/button/button.ts +++ b/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() { diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 6860b9a7de1a..3343d735e6bb 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/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(); } diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index 13b38e26a436..22023da9caa7 100644 --- a/src/lib/input/input.ts +++ b/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) { diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 6d32e6c37239..0330e102b386 100644 --- a/src/lib/radio/radio.ts +++ b/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(); } diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 1a4b57082e90..b827e2bd9c82 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/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(); } diff --git a/src/lib/tabs/tab-label-wrapper.ts b/src/lib/tabs/tab-label-wrapper.ts index 0e1cd8e28b10..d4573bba105c 100644 --- a/src/lib/tabs/tab-label-wrapper.ts +++ b/src/lib/tabs/tab-label-wrapper.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef} from '@angular/core'; +import {Directive, ElementRef, Renderer} from '@angular/core'; /** Used in the `md-tab-group` view to display tab labels */ @@ -6,12 +6,12 @@ import {Directive, ElementRef} from '@angular/core'; 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'); } }