fix(checkbox): pointer events disable ripple events too

We should not disable the ripple events by using `pointer-events: none`. IE11 always focuses the div, instead of the `md-checkbox`, and that's causing issues with ngModel etc.

* redirect the focus, instead of preventing the whole focus / pointer events.
*  @see https://connect.microsoft.com/IE/feedback/details/1028411/

Fixes #7538. Closes #7541.

Author: devversion

src/components/checkbox/checkbox.js

@@ -68,6 +68,7 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
   // **********************************************************
 
   function compile (tElement, tAttrs) {
+    var container = tElement.children();
 
     tAttrs.type = 'checkbox';
     tAttrs.tabindex = tAttrs.tabindex || '0';
@@ -81,6 +82,12 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
       }
     });
 
+    // Redirect focus events to the root element, because IE11 is always focusing the container element instead
+    // of the md-checkbox element. This causes issues when using ngModelOptions: `updateOnBlur`
+    container.on('focus', function() {
+      tElement.focus();
+    });
+
     return function postLink(scope, element, attr, ngModelCtrl) {
       ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
       $mdTheming(element);

src/components/checkbox/checkbox.scss

@@ -58,10 +58,6 @@ md-checkbox {
     height: $checkbox-height;
     @include rtl(left, 0, auto);
     @include rtl(right, auto, 0);
-
-    // Disable pointer events, because IE11 is always focusing the child elements instead of the
-    // md-checkbox element.
-    pointer-events: none;
 
     &:before {
       box-sizing: border-box;

src/components/checkbox/checkbox.spec.js

@@ -136,6 +136,25 @@ describe('mdCheckbox', function() {
     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>');
+
+    document.body.appendChild(checkbox[0]);
+
+    var container = checkbox.children().eq(0);
+    expect(container[0]).toHaveClass('md-container');
+
+    // We simulate IE11's focus bug, which always focuses an unfocusable div
+    // https://connect.microsoft.com/IE/feedback/details/1028411/
+    container[0].tabIndex = -1;
+
+    container.triggerHandler('focus');
+
+    expect(document.activeElement).toBe(checkbox[0]);
+
+    checkbox.remove();
+  });
+
   it('should set focus state on keyboard interaction after clicking', function() {
     var checkbox = compileAndLink('<md-checkbox ng-model="blue"></md-checkbox>');