Fixes #629 - [vdom] Rendering unescaped HTML produces non-functioning HTML input controls

morphdom/index.js

@@ -74,6 +74,13 @@ function morphdom(
             vCurChild = vCurChild.nextSibling;
         }
 
+        if (vEl.$__nodeType === 1) {
+            var elHandler = specialElHandlers[vEl.nodeName];
+            if (elHandler !== undefined) {
+                elHandler(realEl, vEl);
+            }
+        }
+
         return realEl;
     }
 

morphdom/specialElHandlers.js

@@ -61,7 +61,7 @@ module.exports = {
             var i = 0;
             var curChild = toEl.firstChild;
             while(curChild) {
-                if (curChild.nodeName == 'OPTION') {
+                if (curChild.$__nodeName == 'OPTION') {
                     if (curChild.$__hasAttribute('selected')) {
                         selectedIndex = i;
                         break;

runtime/vdom/VNode.js

@@ -1,4 +1,6 @@
 /* jshint newcap:false */
+var specialElHandlers = require('../../morphdom/specialElHandlers');
+
 function VNode() {}
 
 VNode.prototype = {
@@ -89,6 +91,13 @@ VNode.prototype = {
             curChild = curChild.nextSibling;
         }
 
+        if (this.$__nodeType === 1) {
+            var elHandler = specialElHandlers[this.$__nodeName];
+            if (elHandler !== undefined) {
+                elHandler(actualNode, this);
+            }
+        }
+
         return actualNode;
     }
 

runtime/vdom/vdom.js

@@ -44,7 +44,9 @@ function virtualize(node) {
             }
 
             var vdomEl = new VElement(tagName, attrs, null, flags);
-            vdomEl.$__namespaceURI = node.namespaceURI;
+            if (node.namespaceURI !== 'http://www.w3.org/1999/xhtml') {
+                vdomEl.$__namespaceURI = node.namespaceURI;
+            }
 
             if (vdomEl.$__isTextArea) {
                 vdomEl.$__value = node.value;

test/autotests/components-browser/component-unescaped-html/index.marko

@@ -0,0 +1,10 @@
+class {
+
+  onCreate() {
+    this.state = {
+      html: "<input type='text' name='test' value='x' />"
+    }
+  }
+}
+
+<div>$!{state.html}</div>

test/autotests/components-browser/component-unescaped-html/test.js

@@ -0,0 +1,23 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var component = helpers.mount(require('./index'), { });
+
+    expect(component.el.childNodes.length).to.equal(1);
+    expect(component.el.firstChild.nodeName).to.equal('INPUT');
+    expect(component.el.firstChild.value).to.equal('x');
+
+    component.state.html = '<textarea>HELLO WORLD!</textarea>';
+    component.update();
+
+    expect(component.el.childNodes.length).to.equal(1);
+    expect(component.el.firstChild.nodeName).to.equal('TEXTAREA');
+    expect(component.el.firstChild.value).to.equal('HELLO WORLD!');
+
+    component.state.html = '<select><option value="1">One</option><option value="2" selected>Two</option></select>';
+    component.update();
+
+    expect(component.el.childNodes.length).to.equal(1);
+    expect(component.el.firstChild.nodeName).to.equal('SELECT');
+    expect(component.el.firstChild.selectedIndex).to.equal(1);
+};