Fix #214 to prevent duplicate selected attribute from being added to <option> elements if it already exists (#215)

Author: AleksandrHovhannisyan

.changeset/twenty-weeks-fetch.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Don't add selected attribute to <option> elements if they already contain that attribute

src/index.js

@@ -15,8 +15,7 @@ const SHALLOW = { shallow: true };
 // components without names, kept as a hash for later comparison to return consistent UnnamedComponentXX names.
 const UNNAMED = [];
 
-const VOID_ELEMENTS =
-	/^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
+const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
 
 const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 
@@ -296,7 +295,13 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 					if (nodeName === 'select') {
 						selectValue = v;
 						continue;
-					} else if (nodeName === 'option' && selectValue == v) {
+					} else if (
+						// If we're looking at an <option> and it's the currently selected one
+						nodeName === 'option' &&
+						selectValue == v &&
+						// and the <option> doesn't already have a selected attribute on it
+						typeof props.selected === 'undefined'
+					) {
 						s += ` selected`;
 					}
 				}

test/render.test.js

@@ -1139,6 +1139,20 @@ describe('render', () => {
 		);
 	});
 
+	it('should not add a selected attribute if one already exists', () => {
+		let res = render(
+			<select value="B">
+				<option value="A">A</option>
+				<option selected 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">