fix(checkbox): properly show focus effect (#9827)

* Right now (as same as with the button) the focus will be automatically restored when switching the browser tabs (this is bad UX).

* Using the new $mdInteraction service could remove the random $timeout and just fix this issue easily.

Author: devversion

src/components/checkbox/checkbox.js

@@ -54,7 +54,7 @@ angular
  * </hljs>
  *
  */
-function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) {
+function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $mdUtil, $mdInteraction) {
   inputDirective = inputDirective[0];
 
   return {
@@ -130,17 +130,10 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
         0: {}
       }, attr, [ngModelCtrl]);
 
-      scope.mouseActive = false;
       element.on('click', listener)
         .on('keypress', keypressHandler)
-        .on('mousedown', function() {
-          scope.mouseActive = true;
-          $timeout(function() {
-            scope.mouseActive = false;
-          }, 100);
-        })
         .on('focus', function() {
-          if (scope.mouseActive === false) {
+          if ($mdInteraction.getLastInteractionType() === 'keyboard') {
             element.addClass('md-focused');
           }
         })

src/components/checkbox/checkbox.spec.js

@@ -127,16 +127,34 @@ describe('mdCheckbox', function() {
     expect(checkbox[0]).not.toHaveClass('md-focused');
   });
 
-  it('should set focus state on focus and remove on blur', function() {
+  it('should apply focus effect with keyboard interaction', function() {
     var checkbox = compileAndLink('<md-checkbox ng-model="blue"></md-checkbox>');
+    var body = angular.element(document.body);
 
+    // Fake a keyboard interaction for the $mdInteraction service.
+    body.triggerHandler('keydown');
     checkbox.triggerHandler('focus');
+
     expect(checkbox[0]).toHaveClass('md-focused');
 
     checkbox.triggerHandler('blur');
     expect(checkbox[0]).not.toHaveClass('md-focused');
   });
 
+  it('should not apply focus effect with mouse interaction', function() {
+    var checkbox = compileAndLink('<md-checkbox ng-model="blue"></md-checkbox>');
+    var body = angular.element(document.body);
+
+    // Fake a mouse interaction for the $mdInteraction service.
+    body.triggerHandler('mouse');
+    checkbox.triggerHandler('focus');
+
+    expect(checkbox[0]).not.toHaveClass('md-focused');
+
+    checkbox.triggerHandler('blur');
+    expect(checkbox[0]).not.toHaveClass('md-focused');
+  });
+
   it('should redirect focus of container to the checkbox element', function() {
     var checkbox = compileAndLink('<md-checkbox ng-model="blue"></md-checkbox>');