Merge pull request #1498 from dopic/master

Upgrade problem in dynamically created elements
google · Aug 31, 2015 · 3b14426 · 3b14426
2 parents dc393d1 + 13f8653
commit 3b14426
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git 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
@@ -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');