From 13f865395339f0b23303611eb0f9744049b8c9d4 Mon Sep 17 00:00:00 2001
From: Douglas <douglas.picolotto@gmail.com>
Date: Sat, 29 Aug 2015 00:49:12 -0300
Subject: [PATCH] Change in the function upgradElementsInternal to enable the
 upgrade of child elements created by parent element's upgrade, like
 RippleContainerElement in Checkbox. The problem was happening when the
 element was created dynamically.

---
 src/mdlComponentHandler.js    |  2 +-
 test/unit/componentHandler.js | 30 +++++++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

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');