Fix issue causing markup to be pruned from tangy-template templates

Tangerine-Community · Jan 8, 2020 · 0618ebf · 0618ebf
1 parent 1f64a87
commit 0618ebf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/tangy-template.js b/tangy-template.js
@@ -49,7 +49,8 @@ export class TangyTemplate extends PolymerElement {
   connectedCallback() {
     super.connectedCallback()
     // <tangy-form-item> will evaluate this template in the scope it lives.
-    this.template = this.textContent
+    // Note we're not using innerHTML because that will result in expressions like greater than becoming HTML encoded. See note on MDN docs https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
+    this.template = this.innerHTML.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
   }
 
 }

diff --git a/test/tangy-template_test.html b/test/tangy-template_test.html
@@ -29,13 +29,15 @@
           <tangy-form-item id="item1">
             <tangy-input name="input1" label="Number"></tangy-input>
             <tangy-template name="foo">
-              ${getValue('input1')}
-              is 
-              ${parseInt(getValue('input1')) >= 42 
-                ? `greater than or equal to`
-                : `less than`
-              } 
-              42.
+              <h1>
+                ${getValue('input1')}
+                is 
+                ${parseInt(getValue('input1')) >= 42 && true
+                  ? `greater than or equal to`
+                  : `less than`
+                } 
+                42.
+              </h1>
             </tangy-template>
           </tangy-form-item>
         </tangy-form>
@@ -59,7 +61,10 @@
           form.newResponse()
           form.querySelector('#item1').querySelector('[name=input1]').value = '43'
           form.querySelector('#item1').querySelector('[name=input1]').dispatchEvent(new Event('change', {bubbles:true}))
+          // Make sure greater than, less than, and ampersands are converted correctly into code to create the resulting string. 
           assert.equal(form.querySelector('#item1').querySelector('tangy-template').shadowRoot.querySelector('#container').innerText, '43 is greater than or equal to 42.')
+          // Ensure that markup did not get pruned either.
+          assert.equal(!!form.querySelector('#item1').querySelector('tangy-template').shadowRoot.querySelector('#container').querySelector('h1'), true)
         })
       })
     </script>