feat(list): add class to disable proxy elements. (#9470)

* This allows developers to disable proxy elements inside of an list item.

Closes #9423,

Author: devversion

src/components/list/list.js

@@ -116,7 +116,18 @@ function mdListDirective($mdTheming) {
  * - `md-menu` (Open)
  *
  * This means, when using a supported proxy item inside of `md-list-item`, the list item will
- * become clickable and executes the associated action of the proxy element on click.
+ * automatically become clickable and executes the associated action of the proxy element on click.
+ *
+ * It is possible to disable this behavior by applying the `md-no-proxy` class to the list item.
+ *
+ * <hljs lang="html">
+ *   <md-list-item class="md-no-proxy">
+ *     <span>No Proxy List</span>
+ *     <md-checkbox class="md-secondary"></md-checkbox>
+ *   </md-list-item>
+ * </hljs>
+ *
+ * Here are a few examples of proxy elements inside of a list item.
  *
  * <hljs lang="html">
  *   <md-list-item>
@@ -233,18 +244,21 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
 
       if (tAttrs.ngClick || tAttrs.ngDblclick ||  tAttrs.ngHref || tAttrs.href || tAttrs.uiSref || tAttrs.ngAttrUiSref) {
         wrapIn('button');
-      } else {
+      } else if (!tEl.hasClass('md-no-proxy')) {
+
         for (var i = 0, type; type = proxiedTypes[i]; ++i) {
           if (proxyElement = tEl[0].querySelector(type)) {
             hasProxiedElement = true;
             break;
           }
         }
+
         if (hasProxiedElement) {
           wrapIn('div');
-        } else if (!tEl[0].querySelector('md-button:not(.md-secondary):not(.md-exclude)')) {
+        } else {
           tEl.addClass('md-no-proxy');
         }
+
       }
 
       wrapSecondaryItems();
@@ -430,12 +444,13 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
             firstElement  = $element[0].firstElementChild,
             isButtonWrap  = $element.hasClass('_md-button-wrap'),
             clickChild    = isButtonWrap ? firstElement.firstElementChild : firstElement,
-            hasClick      = clickChild && hasClickEvent(clickChild);
+            hasClick      = clickChild && hasClickEvent(clickChild),
+            noProxies     = $element.hasClass('md-no-proxy');
 
         computeProxies();
         computeClickable();
 
-        if ($element.hasClass('md-proxy-focus') && proxies.length) {
+        if (proxies.length) {
           angular.forEach(proxies, function(proxy) {
             proxy = angular.element(proxy);
 
@@ -458,7 +473,8 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
 
 
         function computeProxies() {
-          if (firstElement && firstElement.children && !hasClick) {
+
+          if (firstElement && firstElement.children && !hasClick && !noProxies) {
 
             angular.forEach(proxiedTypes, function(type) {
 

src/components/list/list.spec.js

@@ -64,6 +64,27 @@ describe('mdListItem directive', function() {
     expect($rootScope.modelVal).toBe(false);
   });
 
+  it('should not wrap when proxies are disabled', function() {
+    var listItem = setup(
+      '<md-list-item class="md-no-proxy">' +
+        '<md-switch ng-model="modelVal"></md-switch>' +
+      '</md-list-item>'
+    );
+
+    var switchEl = listItem[0].querySelector('md-switch');
+
+    // If proxies are disabled, the list will not wrap anything.
+    expect(switchEl.parentNode).toBe(listItem[0]);
+
+    listItem.triggerHandler('click');
+    expect($rootScope.modelVal).toBeFalsy();
+
+    switchEl.click();
+    expect($rootScope.modelVal).toBeTruthy();
+
+    expect(listItem).not.toHaveClass('md-clickable')
+  });
+
   it('should not trigger the proxy element, when clicking on a slider', function() {
     var listItem = setup(
       '<md-list-item>' +
@@ -362,17 +383,16 @@ describe('mdListItem directive', function() {
     expect(secondaryContainer.children()[1].nodeName).toBe('MD-BUTTON');
   });
 
-  it('should detect non-compiled md-buttons', function() {
+  it('should not detect a normal button as a proxy element', function() {
     var listItem = setup('<md-list-item><md-button ng-click="sayHello()">Hello</md-button></md-list-item>');
-    expect(listItem.hasClass('md-no-proxy')).toBeFalsy();
+    expect(listItem.hasClass('md-no-proxy')).toBeTruthy();
   });
 
-  it('should not detect secondary or excluded md-buttons', function() {
+  it('should not detect a secondary button as a proxy element', function() {
     var listItem = setup(
       '<md-list-item>' +
       '  <div>Content Here</div>' +
       '  <md-button class="md-secondary" ng-click="sayHello()">Hello</md-button>' +
-      '  <md-button class="md-exclude" ng-click="sayHello()">Hello</md-button>' +
       '</md-list-item>'
     );
     expect(listItem.hasClass('md-no-proxy')).toBeTruthy();