Use FocusOriginMonitor

Author: tinayuangao

src/lib/button-toggle/button-toggle.html

@@ -5,8 +5,6 @@
          [checked]="checked"
          [disabled]="disabled"
          [name]="name"
-         (blur)="_onInputBlur()"
-         (focus)="_onInputFocus()"
          (change)="_onInputChange($event)"
          (click)="_onInputClick($event)">
 

src/lib/button-toggle/button-toggle.scss

@@ -38,7 +38,7 @@ $mat-button-toggle-border-radius: 2px !default;
   position: relative;
 }
 
-.mat-button-toggle.mat-button-toggle-focus .mat-button-toggle-focus-overlay {
+.mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay {
   opacity: 1;
 }
 

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

@@ -21,6 +21,7 @@ import {
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 import {
+  FocusOriginMonitor,
   UniqueSelectionDispatcher,
   coerceBooleanProperty,
   UNIQUE_SELECTION_DISPATCHER_PROVIDER,
@@ -286,21 +287,13 @@ export class MdButtonToggleGroupMultiple {
   styleUrls: ['button-toggle.css'],
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class.mat-button-toggle-focus]': '_hasFocus',
     '[class.mat-button-toggle]': 'true',
-    '(mousedown)': '_setMousedown()',
   }
 })
 export class MdButtonToggle implements OnInit {
   /** Whether or not this button toggle is checked. */
   private _checked: boolean = false;
 
-  /** Whether the button has focus. Used for class binding. */
-  _hasFocus: boolean = false;
-
-  /** Whether a mousedown has occurred on this element in the last 100ms. */
-  _isMouseDown: boolean = false;
-
   /** Type of the button toggle. Either 'radio' or 'checkbox'. */
   _type: ToggleType;
 
@@ -339,7 +332,8 @@ export class MdButtonToggle implements OnInit {
   constructor(@Optional() toggleGroup: MdButtonToggleGroup,
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
               public buttonToggleDispatcher: UniqueSelectionDispatcher,
-              private _renderer: Renderer) {
+              private _renderer: Renderer,
+              private _focusOriginMonitor: FocusOriginMonitor) {
     this.buttonToggleGroup = toggleGroup;
 
     this.buttonToggleGroupMultiple = toggleGroupMultiple;
@@ -370,6 +364,7 @@ export class MdButtonToggle implements OnInit {
     if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
       this._checked = true;
     }
+    this._focusOriginMonitor.registerElementForFocusClasses(this._inputElement.nativeElement, this._renderer);
   }
 
   /** Unique ID for the underlying `input` element. */
@@ -468,31 +463,10 @@ export class MdButtonToggle implements OnInit {
     event.stopPropagation();
   }
 
-  _onInputFocus() {
-    // Only show the focus / ripple indicator when the focus was not triggered by a mouse
-    // interaction on the component.
-    if (!this._isMouseDown) {
-      this._hasFocus = true;
-    }
-  }
-
-  _onInputBlur() {
-    this._hasFocus = false;
-  }
-
   /** Focuses the button. */
   focus() {
     this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
   }
-
-  _setMousedown() {
-    // We only *show* the focus style when focus has come to the button via the keyboard.
-    // The Material Design spec is silent on this topic, and without doing this, the
-    // button continues to look :active after clicking.
-    // @see http://marcysutton.com/button-focus-hell/
-    this._isMouseDown = true;
-    setTimeout(() => { this._isMouseDown = false; }, 100);
-  }
 }