Handle conversion of <textarea> node to React properly

remarkablemark · remarkablemark · commit 115466bacf34 · 2016-08-19T18:49:54.000-04:00
Setting textarea value in children is an antipattern in React. https://facebook.github.io/react/docs/forms.html#why-textarea-value The solution is to set value in `defaultValue` prop instead. Add test case for parsing textarea.
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -27,7 +27,12 @@ function domToReact(nodes) {
         children = null;
 
         if (node.type === 'tag') {
-            if (node.children) {
+            // setting textarea value in children is an antipattern in React
+            // https://facebook.github.io/react/docs/forms.html#why-textarea-value
+            if (node.name === 'textarea' && node.children[0]) {
+                node.attribs.defaultValue = node.children[0].data;
+
+            } else if (node.children) {
                 // continue recursion of creating React elements
                 children = domToReact(node.children);
             }
diff --git a/test/data.json b/test/data.json
@@ -2,6 +2,7 @@
   "html": {
     "single": "<p>foo</p>",
     "multiple": "<p>foo</p><p>bar</p>",
-    "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>"
+    "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
+    "textarea": "<textarea>foo</textarea>"
   }
 }
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -40,4 +40,17 @@ describe('dom-to-react parser', function() {
         );
     });
 
+    // https://facebook.github.io/react/docs/forms.html#why-textarea-value
+    it('converts textarea correctly', function() {
+        var html = data.html.textarea;
+        var reactElement = domToReact(htmlToDOM(html));
+        assert(React.isValidElement(reactElement));
+        assert.deepEqual(
+            reactElement,
+            React.createElement('textarea', {
+                defaultValue: 'foo'
+            }, null)
+        );
+    });
+
 });

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`"html": {`
`3`	`3`	`"single": "<p>foo</p>",`
`4`	`4`	`"multiple": "<p>foo</p><p>bar</p>",`
`5`		`- "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>"`
	`5`	`+ "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",`
	`6`	`+ "textarea": "<textarea>foo</textarea>"`
`6`	`7`	`}`
`7`	`8`	`}`