Merge pull request #85 from developit/fix_select_value

Fix select value not marking option as selected

Author: marvinhagemeister

src/index.js

@@ -34,7 +34,7 @@ let shallowRender = (vnode, context) => renderToString(vnode, context, SHALLOW);
 
 
 /** The default export is an alias of `render()`. */
-function renderToString(vnode, context, opts, inner, isSvgMode) {
+function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	if (vnode==null || typeof vnode==='boolean') {
 		return '';
 	}
@@ -65,7 +65,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
 			getChildren(children, vnode.props.children);
 
 			for (let i = 0; i < children.length; i++) {
-				rendered += renderToString(children[i], context, opts, opts.shallowHighOrder!==false, isSvgMode);
+				rendered += renderToString(children[i], context, opts, opts.shallowHighOrder!==false, isSvgMode, selectValue);
 			}
 			return rendered;
 		}
@@ -97,7 +97,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
 				context = assign(assign({}, context), c.getChildContext());
 			}
 
-			return renderToString(rendered, context, opts, opts.shallowHighOrder!==false);
+			return renderToString(rendered, context, opts, opts.shallowHighOrder!==false, isSvgMode, selectValue);
 		}
 	}
 
@@ -149,6 +149,16 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
 						continue;
 					}
 				}
+
+				if (name==='value') {
+					if (nodeName==='select') {
+						selectValue = v;
+						continue;
+					}
+					else if (nodeName==='option' && selectValue==v) {
+						s += ` selected`;
+					}
+				}
 				s += ` ${name}="${encodeEntities(v)}"`;
 			}
 		}
@@ -183,7 +193,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
 			let child = children[i];
 			if (child!=null && child!==false) {
 				let childSvgMode = nodeName==='svg' ? true : nodeName==='foreignObject' ? false : isSvgMode,
-					ret = renderToString(child, context, opts, true, childSvgMode);
+					ret = renderToString(child, context, opts, true, childSvgMode, selectValue);
 				if (pretty && !hasLarge && isLargeString(ret)) hasLarge = true;
 				if (ret) pieces.push(ret);
 			}

test/render.js

@@ -730,4 +730,52 @@ describe('render', () => {
 			expect(called).to.equal(false);
 		});
 	});
+
+	it('should render select value on option', () => {
+		let res = render(
+			<select value="B">
+				<option value="A">A</option>
+				<option value="B">B</option>
+			</select>
+		);
+		expect(res).to.equal('<select><option value="A">A</option><option selected value="B">B</option></select>');
+	});
+
+	it('should render select value on option with a Fragment', () => {
+		let res = render(
+			<select value="B">
+				<Fragment>
+					<option value="A">A</option>
+					<option value="B">B</option>
+				</Fragment>
+			</select>
+		);
+		expect(res).to.equal('<select><option value="A">A</option><option selected value="B">B</option></select>');
+	});
+
+	it('should render select value on option through a component', () => {
+		function Foo() {
+			return (
+				<optgroup label="foo">
+					<option value="A">A</option>
+					<option value="B">B</option>
+				</optgroup>
+			);
+		}
+		let res = render(
+			<select value="B">
+				<Foo />
+			</select>
+		);
+		expect(res).to.equal('<select><optgroup label="foo"><option value="A">A</option><option selected value="B">B</option></optgroup></select>');
+	});
+
+	it('should render select value with loose equality', () => {
+		let res = render(
+			<select value={2}>
+				<option value="2">2</option>
+			</select>
+		);
+		expect(res).to.equal('<select><option selected value="2">2</option></select>');
+	});
 });