Add focus to checkbox, radio, button-toggle and slide-toggle

Author: tinayuangao

src/demo-app/slide-toggle/slide-toggle-demo.html

@@ -26,4 +26,4 @@
 
   </form>
 
-</div>
+</div>

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

@@ -500,6 +500,16 @@ describe('MdButtonToggle', () => {
       expect(changeSpy).toHaveBeenCalledTimes(2);
     }));
 
+    it('should focus on underlying input element when focus() is called', () => {
+      let nativeRadioInput = buttonToggleDebugElement.query(By.css('input')).nativeElement;
+      expect(document.activeElement).not.toBe(nativeRadioInput);
+
+      buttonToggleInstance.focus();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(nativeRadioInput);
+    });
+
   });
 });
 

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

@@ -4,13 +4,15 @@ import {
     Component,
     ContentChildren,
     Directive,
+    ElementRef,
     EventEmitter,
     HostBinding,
     Input,
     OnInit,
     Optional,
     Output,
     QueryList,
+    ViewChild,
     ViewEncapsulation,
     forwardRef,
     AfterViewInit
@@ -266,6 +268,8 @@ export class MdButtonToggle implements OnInit {
     return this._change.asObservable();
   }
 
+  @ViewChild('input') _inputElement: ElementRef;
+
   constructor(@Optional() toggleGroup: MdButtonToggleGroup,
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
               public buttonToggleDispatcher: MdUniqueSelectionDispatcher) {
@@ -395,6 +399,10 @@ export class MdButtonToggle implements OnInit {
     // Preventing bubbling for the second event will solve that issue.
     event.stopPropagation();
   }
+
+  focus() {
+    this._inputElement.nativeElement.focus();
+  }
 }
 
 

src/lib/checkbox/checkbox.html

@@ -1,6 +1,7 @@
 <label class="md-checkbox-layout">
   <div class="md-checkbox-inner-container">
-    <input class="md-checkbox-input md-visually-hidden" type="checkbox"
+    <input #input
+           class="md-checkbox-input md-visually-hidden" type="checkbox"
            [id]="inputId"
            [required]="required"
            [checked]="checked"

src/lib/checkbox/checkbox.spec.ts

@@ -278,6 +278,15 @@ describe('MdCheckbox', () => {
       expect(inputElement.required).toBe(false);
     });
 
+    it('should focus on underlying input element when focus() is called', () => {
+      expect(document.activeElement).not.toBe(inputElement);
+
+      checkboxInstance.focus();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(inputElement);
+    });
+
     describe('color behaviour', () => {
       it('should apply class based on color attribute', () => {
         testComponent.checkboxColor = 'primary';

src/lib/checkbox/checkbox.ts

@@ -10,6 +10,7 @@ import {
     forwardRef,
     NgModule,
     ModuleWithProviders,
+    ViewChild,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
@@ -134,6 +135,9 @@ export class MdCheckbox implements ControlValueAccessor {
   /** Event emitted when the checkbox's `checked` value changes. */
   @Output() change: EventEmitter<MdCheckboxChange> = new EventEmitter<MdCheckboxChange>();
 
+  /** The native `<input type=checkbox> element */
+  @ViewChild('input') _inputElement: ElementRef;
+
   /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
   onTouched: () => any = () => {};
 
@@ -314,6 +318,11 @@ export class MdCheckbox implements ControlValueAccessor {
     }
   }
 
+  focus() {
+    this._inputElement.nativeElement.focus();
+    this._onInputFocus();
+  }
+
   _onInputClick(event: Event) {
     // We have to stop propagation for click events on the visual hidden input element.
     // By default, when a user clicks on a label element, a generated click event will be

src/lib/radio/radio.spec.ts

@@ -188,6 +188,20 @@ describe('MdRadio', () => {
       expect(radioNativeElements[0].classList).not.toContain('md-radio-focused');
     });
 
+    it('should focus individual radio buttons', () => {
+      let nativeRadioInput = <HTMLElement> radioNativeElements[0].querySelector('input');
+
+      radioInstances[0].focus();
+      fixture.detectChanges();
+
+      expect(radioNativeElements[0].classList).toContain('md-radio-focused');
+
+      dispatchEvent('blur', nativeRadioInput);
+      fixture.detectChanges();
+
+      expect(radioNativeElements[0].classList).not.toContain('md-radio-focused');
+    });
+
     it('should update the group and radios when updating the group value', () => {
       expect(groupInstance.value).toBeFalsy();
 
@@ -519,6 +533,16 @@ describe('MdRadio', () => {
 
       expect(fruitRadioNativeInputs[0].getAttribute('aria-labelledby')).toBe('uvw');
     });
+
+    it('should focus on underlying input element when focus() is called', () => {
+      for (let i = 0; i < fruitRadioInstances.length; i++) {
+        expect(document.activeElement).not.toBe(fruitRadioNativeInputs[i]);
+        fruitRadioInstances[i].focus();
+        fixture.detectChanges();
+
+        expect(document.activeElement).toBe(fruitRadioNativeInputs[i]);
+      }
+    });
   });
 });
 

src/lib/radio/radio.ts

@@ -15,6 +15,7 @@ import {
   forwardRef,
   NgModule,
   ModuleWithProviders,
+  ViewChild,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {
@@ -281,6 +282,9 @@ export class MdRadioButton implements OnInit {
   @Output()
   change: EventEmitter<MdRadioChange> = new EventEmitter<MdRadioChange>();
 
+  /** The native `<input type=radio> element */
+  @ViewChild('input') _inputElement: ElementRef;
+
   constructor(@Optional() radioGroup: MdRadioGroup,
               private _elementRef: ElementRef,
               public radioDispatcher: MdUniqueSelectionDispatcher) {
@@ -400,6 +404,11 @@ export class MdRadioButton implements OnInit {
     this._isFocused = true;
   }
 
+  focus() {
+    this._inputElement.nativeElement.focus();
+    this._onInputFocus();
+  }
+
   /** TODO: internal */
   _onInputBlur() {
     this._isFocused = false;

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

@@ -336,6 +336,16 @@ describe('MdSlideToggle', () => {
       expect(inputElement.required).toBe(false);
     });
 
+    it('should focus on underlying input element when focus() is called', () => {
+      expect(slideToggleElement.classList).not.toContain('md-slide-toggle-focused');
+      expect(document.activeElement).not.toBe(inputElement);
+
+      slideToggle.focus();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(inputElement);
+      expect(slideToggleElement.classList).toContain('md-slide-toggle-focused');
+    });
   });
 
   describe('custom template', () => {

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

@@ -10,6 +10,7 @@ import {
   AfterContentInit,
   NgModule,
   ModuleWithProviders,
+  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
@@ -86,6 +87,8 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   // Returns the unique id for the visual hidden input.
   getInputId = () => `${this.id || this._uniqueId}-input`;
 
+  @ViewChild('input') _inputElement: ElementRef;
+
   constructor(private _elementRef: ElementRef, private _renderer: Renderer) {}
 
   /** TODO: internal */
@@ -174,6 +177,11 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
     this.onTouched = fn;
   }
 
+  focus() {
+    this._inputElement.nativeElement.focus();
+    this._onInputFocus();
+  }
+
   @Input()
   get checked() {
     return !!this._checked;