Merge pull request #161 from preactjs/textarea-value-ssr

Fix SSR for <textarea value>

Author: marvinhagemeister

src/index.js

@@ -145,7 +145,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	}
 
 	// render JSX to HTML
-	let s = '', html;
+	let s = '', propChildren, html;
 
 	if (props) {
 		let attrs = Object.keys(props);
@@ -156,7 +156,10 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 		for (let i=0; i<attrs.length; i++) {
 			let name = attrs[i],
 				v = props[name];
-			if (name==='children') continue;
+			if (name==='children') {
+				propChildren = v;
+				continue;
+			}
 
 			if (name.match(/[\s\n\\/='"\0<>]/)) continue;
 
@@ -194,6 +197,10 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 			if (name==='dangerouslySetInnerHTML') {
 				html = v && v.__html;
 			}
+			else if (nodeName === 'textarea' && name === 'value') {
+				// <textarea value="a&b"> --> <textarea>a&amp;b</textarea>
+				propChildren = v;
+			}
 			else if ((v || v===0 || v==='') && typeof v!=='function') {
 				if (v===true || v==='') {
 					v = name;
@@ -241,7 +248,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 		}
 		s += html;
 	}
-	else if (props && getChildren(children = [], props.children).length) {
+	else if (propChildren != null && getChildren(children = [], propChildren).length) {
 		let hasLarge = pretty && ~s.indexOf('\n');
 		let lastWasText = false;
 

test/render.js

@@ -124,6 +124,27 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
+		it('should serialize textarea value', () => {
+			let rendered = render(<textarea value="abc" />),
+				expected = `<textarea>abc</textarea>`;
+
+			expect(rendered).to.equal(expected);
+		});
+
+		it('should escape textarea value', () => {
+			let rendered = render(<textarea value={`a&b"c`} />),
+				expected = `<textarea>a&amp;b&quot;c</textarea>`;
+
+			expect(rendered).to.equal(expected);
+		});
+
+		it('should omit empty textarea value', () => {
+			let rendered = render(<textarea value="" />),
+				expected = `<textarea></textarea>`;
+
+			expect(rendered).to.equal(expected);
+		});
+
 		it('should omit falsey children', () => {
 			let rendered = render(<div>{null}|{undefined}|{false}</div>),
 				expected = `<div>||</div>`;