diff --git a/src/mdlComponentHandler.js b/src/mdlComponentHandler.js index 06a8c87e7..5f2b777a3 100644 --- a/src/mdlComponentHandler.js +++ b/src/mdlComponentHandler.js @@ -191,10 +191,10 @@ window.componentHandler = (function() { for (var i = 0, n = elements.length, element; i < n; i++) { element = elements[i]; if (element instanceof HTMLElement) { + upgradeElementInternal(element); if (element.children.length > 0) { upgradeElementsInternal(element.children); } - upgradeElementInternal(element); } } } diff --git a/test/unit/componentHandler.js b/test/unit/componentHandler.js index 5c2206fe0..7bbacc4e6 100644 --- a/test/unit/componentHandler.js +++ b/test/unit/componentHandler.js @@ -35,6 +35,25 @@ function createNestedElementsForComponentHandlerTest() { return container; } +function createCheckbox(){ + var label = document.createElement('label'); + label.className = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect'; + label.htmlFor = 'checkbox1'; + + var input = document.createElement('input'); + input.setAttribute('type','checkbox'); + input.className = 'mdl-checkbox__input'; + input.id = 'checkbox1'; + label.appendChild(input); + + var span = document.createElement('span'); + span.className = 'mdl-checkbox__label'; + span.innerHTML = 'checkbox'; + label.appendChild(span); + + return label; +} + describe('componentHandler', function() { it('should be globally available', function() { @@ -93,7 +112,7 @@ describe('componentHandler', function() { componentHandler.upgradeElement(el, 'MaterialButton'); componentHandler.upgradeElement(el, 'MaterialRipple'); expect($(el)).to.have.data('upgraded', ',MaterialButton,MaterialRipple'); - }); + }); it('should upgrade a single component to an element by using its CSS classes', function() { var el = document.createElement('button'); @@ -124,6 +143,15 @@ describe('componentHandler', function() { expect($(el)).to.have.data('upgraded', ',MaterialButtonPostfix,MaterialButton'); }); + it('should upgrade child elements created by parent upgrade', function () { + var checkbox = createCheckbox(); + + componentHandler.upgradeElements(checkbox); + + var child = checkbox.lastChild; + expect($(child)).to.have.data('upgraded', ',MaterialRipple'); + }); + it('should upgrade all elements and their children within an HTMLCollection', function() { var container = createNestedElementsForComponentHandlerTest(); var buttons = document.querySelectorAll('.mdl-js-button');