diff --git a/src/components/list/list.js b/src/components/list/list.js index 2310907fbd..5febce0231 100644 --- a/src/components/list/list.js +++ b/src/components/list/list.js @@ -349,9 +349,11 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) { } function wrapSecondaryItem(secondaryItem, container) { - // If the current secondary item is not a button, but contains a ng-click attribute, - // the secondary item will be automatically wrapped inside of a button. - if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) { + // If the current secondary item is not a button or proxied element, + // but contains a ng-click attribute, the secondary item will be automatically + // wrapped inside of a button. + if (secondaryItem && !isButton(secondaryItem) && !isProxiedElement(secondaryItem) + && secondaryItem.hasAttribute('ng-click')) { $mdAria.expect(secondaryItem, 'aria-label'); var buttonWrapper = angular.element(''); @@ -367,7 +369,8 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) { secondaryItem = buttonWrapper[0]; } - if (secondaryItem && (!hasClickEvent(secondaryItem) || (!tAttrs.ngClick && isProxiedElement(secondaryItem)))) { + if (secondaryItem && !tAttrs.ngClick && !hasClickEvent(secondaryItem) + && isProxiedElement(secondaryItem)) { // In this case we remove the secondary class, so we can identify it later, when we searching for the // proxy items. angular.element(secondaryItem).removeClass('md-secondary'); diff --git a/src/components/list/list.spec.js b/src/components/list/list.spec.js index 84d9271309..de46872dad 100644 --- a/src/components/list/list.spec.js +++ b/src/components/list/list.spec.js @@ -334,6 +334,53 @@ describe('mdListItem directive', function() { expect(iconButton.firstElementChild.hasAttribute('ng-show')).toBe(false); }); + it('should not create a parent button for proxied secondary elements with ng-click', function() { + var listItem = setup( + '' + + '

Hello World

' + + '' + + '
'); + + // First child is our button wrap + var firstChild = listItem.children().eq(0); + expect(firstChild[0].nodeName).toBe('DIV'); + + expect(listItem).toHaveClass('_md-button-wrap'); + + // It should contain three elements, the button overlay, inner content + // and the secondary container. + expect(firstChild.children().length).toBe(3); + + var secondaryContainer = firstChild.children().eq(2); + expect(secondaryContainer).toHaveClass('md-secondary-container'); + + // The secondary container should contain the md-checkbox, without any button as parent. + var checkboxItem = secondaryContainer.children()[0]; + + expect(checkboxItem.nodeName).toBe('MD-CHECKBOX'); + expect(checkboxItem.hasAttribute('ng-click')).toBe(true); + }); + + it('should not use as a proxied element when using ng-click on the element', function() { + var listItem = setup( + '' + + '

Hello World

' + + '' + + '
'); + + var checkboxEl = listItem.find('md-checkbox'); + + expect($rootScope.isChecked).toBeFalsy(); + + var clickListener = listItem[0].querySelector('div'); + + clickListener.click(); + expect($rootScope.isChecked).toBeFalsy(); + + checkboxEl[0].click(); + expect($rootScope.isChecked).toBeTruthy(); + }); + it('moves multiple md-secondary items outside of the button', function() { var listItem = setup( '' +