fix(checkbox): prevent ng-click firing on didabled checkboxes. Fixes

angular · Sep 30, 2015 · 1cae87c · 1cae87c
1 parent 05dd565
commit 1cae87c
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 125 deletions.
diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
@@ -54,7 +54,7 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
  restrict: 'E',
  transclude: true,
  require: '?ngModel',
- priority:210, // Run before ngAria
+ priority: 210, // Run before ngAria
  template: 
  '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
  '<div class="md-icon"></div>' +
@@ -73,6 +73,14 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
  tAttrs.tabindex = tAttrs.tabindex || '0';
  tElement.attr('role', tAttrs.type);
 
+ // Attach a click handler in compile in order to immediately stop propagation
+ // (especially for ng-click) when the checkbox is disabled.
+ tElement.on('click', function(event) {
+ if (this.hasAttribute('disabled')) {
+ event.stopImmediatePropagation();
+ }
+ });
+
  return function postLink(scope, element, attr, ngModelCtrl) {
  ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
  $mdTheming(element);
@@ -83,10 +91,12 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
  ngModelCtrl.$setViewValue.bind(ngModelCtrl)
  );
  }
+
  $$watchExpr('ngDisabled', 'tabindex', {
  true: '-1',
  false: attr.tabindex
  });
+
  $mdAria.expectWithText(element, 'aria-label');
 
  // Reuse the original input[type=checkbox] directive from Angular core.
@@ -102,14 +112,18 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
  .on('keypress', keypressHandler)
  .on('mousedown', function() {
  scope.mouseActive = true;
- $timeout(function(){
+ $timeout(function() {
  scope.mouseActive = false;
  }, 100);
  })
  .on('focus', function() {
- if(scope.mouseActive === false) { element.addClass('md-focused'); }
+ if (scope.mouseActive === false) {
+ element.addClass('md-focused');
+ }
  })
- .on('blur', function() { element.removeClass('md-focused'); });
+ .on('blur', function() {
+ element.removeClass('md-focused');
+ });
 
  ngModelCtrl.$render = render;
 
@@ -127,12 +141,18 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
  var keyCode = ev.which || ev.keyCode;
  if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
  ev.preventDefault();
- if (!element.hasClass('md-focused')) { element.addClass('md-focused'); }
+
+ if (!element.hasClass('md-focused')) {
+ element.addClass('md-focused');
+ }
+
  listener(ev);
  }
  }
  function listener(ev) {
- if (element[0].hasAttribute('disabled')) return;
+ if (element[0].hasAttribute('disabled')) {
+ return;
+ }
 
  scope.$apply(function() {
  // Toggle the checkbox value...