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

Author: necolas

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`

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`

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
 }>;

packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js

@@ -12,12 +12,14 @@ import type { AutoComplete, StrictReactDOMProps } from './StrictReactDOMProps';
 export type StrictReactDOMSelectProps = $ReadOnly<{
   ...StrictReactDOMProps,
   autoComplete?: AutoComplete,
+  defaultValue?: ?(Stringish | Array<Stringish>),
   multiple?: ?boolean,
   name?: ?string,
   required?: ?boolean,
   onBeforeInput?: $FlowFixMe,
   onChange?: $FlowFixMe,
   onInput?: $FlowFixMe,
   onInvalid?: $FlowFixMe,
-  onSelect?: $FlowFixMe
+  onSelect?: $FlowFixMe,
+  value?: ?(Stringish | Array<Stringish>)
 }>;

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"
 />
 `;
 

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"
         />
       );
     });