Merge pull request #195 from microsoftgraph/nmetulev/peson-card-template

Fix for templates not rendering children in the right order
microsoftgraph · Nov 4, 2019 · 24cab1f · 24cab1f
1 parent 4aa11d8
commit 24cab1f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/mgt/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt/src/components/mgt-person-card/mgt-person-card.ts
@@ -140,7 +140,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       return html`
         <div class="root" @click=${this.handleClose}>
           <div class="default-view">
-            ${this.renderTemplate('default', { person: this.personDetails }) ||
+            ${this.renderTemplate('default', { person: this.personDetails, personImage: this.personImage }) ||
               html`
                 <mgt-person
                   class="person-image"
@@ -257,7 +257,10 @@ export class MgtPersonCard extends MgtTemplatedComponent {
                 ? html`
                     <div class="section-divider"></div>
                     <div class="custom-section">
-                      ${this.renderTemplate('additional-details', null)}
+                      ${this.renderTemplate('additional-details', {
+                        person: this.personDetails,
+                        personImage: this.personImage
+                      })}
                     </div>
                   `
                 : null}

diff --git a/packages/mgt/src/components/templateHelper.ts b/packages/mgt/src/components/templateHelper.ts
@@ -184,7 +184,6 @@ export class TemplateHelper {
           // first remove the child
           // we will need to make copy of the child for
           // each element in the list
-          nodeElement.removeChild(childElement);
           childElement.removeAttribute('data-for');
 
           for (let j = 0; j < list.length; j++) {
@@ -195,8 +194,10 @@ export class TemplateHelper {
 
             const clone = childElement.cloneNode(true);
             this.renderNode(clone, newContext, converters);
-            nodeElement.appendChild(clone);
+            nodeElement.insertBefore(clone, childElement);
           }
+
+          nodeElement.removeChild(childElement);
         }
       }
     }