From 0563263b9d57476ed62ed11593094a01306bbcc4 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Fri, 11 Jul 2025 13:07:25 -0700
Subject: [PATCH] Fix props for `<select>` and `<option>` elements

Unlike in HTML, passing a `selected` attribute to `<option>` is not
supported. Instead, the selected option's value should be passed to
the`value` or `defaultValue` props of the `<select>` element.

Fix #335
---
 apps/website/docs/api/03-html/09-option.md               | 5 ++---
 apps/website/docs/api/03-html/10-select.md               | 8 +++++---
 .../src/types/StrictReactDOMOptionProps.js               | 1 -
 .../src/types/StrictReactDOMSelectProps.js               | 4 +++-
 .../tests/__snapshots__/html-test.js.snap-dom            | 3 ++-
 packages/react-strict-dom/tests/html-test.js             | 9 +++------
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/website/docs/api/03-html/09-option.md b/apps/website/docs/api/03-html/09-option.md
index 3a131afc..2c7c8887 100644
--- a/apps/website/docs/api/03-html/09-option.md
+++ b/apps/website/docs/api/03-html/09-option.md
@@ -14,8 +14,8 @@ To display an item within `<html.select>`, render the `<html.option>` component.
 import { html } from 'react-strict-dom';
 
 const Foo = () => (
-  <html.select>
-    <html.option>Red</html.option>
+  <html.select value="red">
+    <html.option value="red">Red</html.option>
   </html.select>
 );
 ```
@@ -25,5 +25,4 @@ const Foo = () => (
 * [...Common props](/api/html/common/)
 * `disabled`
 * `label`
-* `selected`
 * `value`
diff --git a/apps/website/docs/api/03-html/10-select.md b/apps/website/docs/api/03-html/10-select.md
index 8ec29bec..3dcf08d4 100644
--- a/apps/website/docs/api/03-html/10-select.md
+++ b/apps/website/docs/api/03-html/10-select.md
@@ -8,14 +8,14 @@ title: <html.select>
 
 ## Overview
 
-To display a select box, render the `<html.select` component.
+To display a select box, render the `<html.select>` component.
 
 ```jsx
 import { html } from 'react-strict-dom';
 
 const Foo = () => (
-  <html.select>
-    <html.option>Red</html.option>
+  <html.select value="red">
+    <html.option value="red">Red</html.option>
   </html.select>
 );
 ```
@@ -24,6 +24,7 @@ const Foo = () => (
 
 * [...Common props](/api/html/common/)
 * `autoComplete`
+* `defaultValue`
 * `multiple`
 * `name`
 * `required`
@@ -32,3 +33,4 @@ const Foo = () => (
 * `onInput`
 * `onInvalid`
 * `onSelect`
+* `value`
diff --git a/packages/react-strict-dom/src/types/StrictReactDOMOptionProps.js b/packages/react-strict-dom/src/types/StrictReactDOMOptionProps.js
index 98c9277e..070e7888 100644
--- a/packages/react-strict-dom/src/types/StrictReactDOMOptionProps.js
+++ b/packages/react-strict-dom/src/types/StrictReactDOMOptionProps.js
@@ -13,6 +13,5 @@ export type StrictReactDOMOptionProps = $ReadOnly<{
   ...StrictReactDOMProps,
   disabled?: ?boolean,
   label?: ?Stringish,
-  selected?: ?boolean,
   value?: ?Stringish
 }>;
diff --git a/packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js b/packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js
index 76754030..a3981b07 100644
--- a/packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js
+++ b/packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js
@@ -12,6 +12,7 @@ import type { AutoComplete, StrictReactDOMProps } from './StrictReactDOMProps';
 export type StrictReactDOMSelectProps = $ReadOnly<{
   ...StrictReactDOMProps,
   autoComplete?: AutoComplete,
+  defaultValue?: ?(Stringish | Array<Stringish>),
   multiple?: ?boolean,
   name?: ?string,
   required?: ?boolean,
@@ -19,5 +20,6 @@ export type StrictReactDOMSelectProps = $ReadOnly<{
   onChange?: $FlowFixMe,
   onInput?: $FlowFixMe,
   onInvalid?: $FlowFixMe,
-  onSelect?: $FlowFixMe
+  onSelect?: $FlowFixMe,
+  value?: ?(Stringish | Array<Stringish>)
 }>;
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom
index fa5bd896..deddcde5 100644
--- a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom
+++ b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom
@@ -5070,7 +5070,6 @@ exports[`html "option" supports inline event handlers 1`] = `
 exports[`html "option" supports input attributes 1`] = `
 <option
   className="html-option"
-  defaultValue="defaultValue"
   disabled={true}
   label="label"
   ref={null}
@@ -5647,6 +5646,7 @@ exports[`html "select" ignores and warns about unsupported attributes 1`] = `
 exports[`html "select" supports additional select attributes 1`] = `
 <select
   className="html-select x1y0btm7 x1ghz6dp x1717udv"
+  defaultValue="defaultValue"
   disabled={true}
   name="user-language"
   onBeforeInput={[Function]}
@@ -5658,6 +5658,7 @@ exports[`html "select" supports additional select attributes 1`] = `
   readOnly={true}
   ref={null}
   required={true}
+  value="value"
 />
 `;
 
diff --git a/packages/react-strict-dom/tests/html-test.js b/packages/react-strict-dom/tests/html-test.js
index 9df44e8a..e3a50c55 100644
--- a/packages/react-strict-dom/tests/html-test.js
+++ b/packages/react-strict-dom/tests/html-test.js
@@ -351,12 +351,7 @@ describe('html', () => {
     let root;
     act(() => {
       root = create(
-        <html.option
-          defaultValue="defaultValue"
-          disabled={true}
-          label="label"
-          value="value"
-        />
+        <html.option disabled={true} label="label" value="value" />
       );
     });
     expect(root.toJSON()).toMatchSnapshot();
@@ -367,6 +362,7 @@ describe('html', () => {
     act(() => {
       root = create(
         <html.select
+          defaultValue="defaultValue"
           disabled={true}
           name="user-language"
           onBeforeInput={function onBeforeInput() {}}
@@ -377,6 +373,7 @@ describe('html', () => {
           onSelectionChange={function onSelectionChange() {}}
           readOnly={true}
           required={true}
+          value="value"
         />
       );
     });