diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 7fd7c478c6fa..3d93b950324b 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -295,6 +295,20 @@ describe('MdCheckbox', () => { expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true); }); + + it('should activate the ripple focused class when the input is focused', () => { + expect(checkboxNativeElement.classList).not.toContain('md-ripple-focused'); + + checkboxInstance._onInputFocus(); + fixture.detectChanges(); + + expect(checkboxNativeElement.classList).toContain('md-ripple-focused'); + + checkboxInstance._onInputBlur(); + fixture.detectChanges(); + + expect(checkboxNativeElement.classList).not.toContain('md-ripple-focused'); + }); }); describe('state transition css classes', () => { @@ -555,13 +569,13 @@ describe('MdCheckbox', () => { /** Simple component for testing a single checkbox. */ @Component({ template: ` -
- + `, }) diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index daa4143d7ffa..27997da00c6b 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -69,7 +69,7 @@ export class MdCheckboxChange { '[class.md-checkbox-checked]': 'checked', '[class.md-checkbox-disabled]': 'disabled', '[class.md-checkbox-align-end]': 'align == "end"', - '[class.md-checkbox-focused]': 'hasFocus', + '[class.md-ripple-focused]': 'hasFocus', // TODO: should only be triggered by keyboard focus }, providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None,