Match select value against primitives to string but not undefined (#24077)

Author: sebmarkbage

packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js

@@ -246,4 +246,34 @@ describe('ReactDOMServerIntegrationSelect', () => {
       expect(option.selected).toBe(true);
     },
   );
+
+  itRenders(
+    'a boolean true select value match the string "true"',
+    async render => {
+      const e = await render(
+        <select value={true} readOnly={true}>
+          <option value="first">First</option>
+          <option value="true">True</option>
+        </select>,
+        1,
+      );
+      expect(e.firstChild.selected).toBe(false);
+      expect(e.lastChild.selected).toBe(true);
+    },
+  );
+
+  itRenders(
+    'a missing select value does not match the string "undefined"',
+    async render => {
+      const e = await render(
+        <select readOnly={true}>
+          <option value="first">First</option>
+          <option value="undefined">Undefined</option>
+        </select>,
+        1,
+      );
+      expect(e.firstChild.selected).toBe(true);
+      expect(e.lastChild.selected).toBe(false);
+    },
+  );
 });

packages/react-dom/src/server/ReactDOMServerFormatConfig.js

@@ -749,7 +749,7 @@ function pushStartOption(
     }
   }
 
-  if (selectedValue !== null) {
+  if (selectedValue != null) {
     let stringValue;
     if (value !== null) {
       if (__DEV__) {
@@ -782,8 +782,13 @@ function pushStartOption(
           break;
         }
       }
-    } else if (selectedValue === stringValue) {
-      target.push(selectedMarkerAttribute);
+    } else {
+      if (__DEV__) {
+        checkAttributeStringCoercion(selectedValue, 'select.value');
+      }
+      if ('' + selectedValue === stringValue) {
+        target.push(selectedMarkerAttribute);
+      }
     }
   } else if (selected) {
     target.push(selectedMarkerAttribute);