From c681bf6f01a2da0efa9cc9e6ac972ff5c1db59ee Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Mon, 2 Oct 2017 15:34:10 -0700 Subject: [PATCH 1/3] Set defaultSelected on option element from select's defaultValue --- .../dom/fiber/wrappers/ReactDOMFiberSelect.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js b/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js index 098826fa86093..3778d4092ed14 100644 --- a/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js +++ b/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js @@ -76,6 +76,7 @@ function updateOptions( node: HTMLSelectElement, multiple: boolean, propValue: any, + setDefaultSelected: boolean, ) { type IndexableHTMLOptionsCollection = HTMLOptionsCollection & { [key: number]: HTMLOptionElement, @@ -94,6 +95,9 @@ function updateOptions( if (options[i].selected !== selected) { options[i].selected = selected; } + if (selected && setDefaultSelected) { + options[i].defaultSelected = true; + } } } else { // Do not set `select.value` as exact behavior isn't consistent across all @@ -103,6 +107,9 @@ function updateOptions( for (let i = 0; i < options.length; i++) { if (options[i].value === selectedValue) { options[i].selected = true; + if (setDefaultSelected) { + options[i].defaultSelected = true; + } return; } if (defaultSelected === null && !options[i].disabled) { @@ -175,7 +182,7 @@ var ReactDOMSelect = { if (value != null) { updateOptions(node, !!props.multiple, value); } else if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue); + updateOptions(node, !!props.multiple, props.defaultValue, true); } }, @@ -194,7 +201,7 @@ var ReactDOMSelect = { } else if (wasMultiple !== !!props.multiple) { // For simplicity, reapply `defaultValue` if `multiple` is toggled. if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue); + updateOptions(node, !!props.multiple, props.defaultValue, true); } else { // Revert the select back to its default unselected state. updateOptions(node, !!props.multiple, props.multiple ? [] : ''); From c5969adbb4b470431c5a1d339c5904ce2e3d4dbf Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Mon, 2 Oct 2017 16:58:41 -0700 Subject: [PATCH 2/3] Add form reset fixture for selects --- .../src/components/fixtures/selects/index.js | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/fixtures/dom/src/components/fixtures/selects/index.js b/fixtures/dom/src/components/fixtures/selects/index.js index a0b34470bfb95..9f97d1280046b 100644 --- a/fixtures/dom/src/components/fixtures/selects/index.js +++ b/fixtures/dom/src/components/fixtures/selects/index.js @@ -7,11 +7,23 @@ const ReactDOM = window.ReactDOM; class SelectFixture extends React.Component { state = {value: ''}; _nestedDOMNode = null; + _singleFormDOMNode = null; + _multipleFormDOMNode = null; onChange = event => { this.setState({value: event.target.value}); }; + resetSingleOptionForm = event => { + event.preventDefault(); + this._singleFormDOMNode.reset(); + }; + + resetMultipleOptionForm = event => { + event.preventDefault(); + this._multipleFormDOMNode.reset(); + }; + componentDidMount() { this._renderNestedSelect(); } @@ -100,6 +112,49 @@ class SelectFixture extends React.Component { + + + +
  • Open the select
    • +
  • Select "baz" or "foo"
    • +
  • Click the "Reset" button
    • +     + + The select should be reset to the inital value, "bar" + + +
    +
    (this._singleFormDOMNode = n)}> + + +
    +
    +     + + + +
  • Select any combination of options
    • +
  • Click the "Reset" button
    • +     + + The select should be reset to the initial values "foo" and "baz" + + +
    +
    (this._multipleFormDOMNode = n)}> + + +
    +
    +     ); } From 2ee1ba7f765dd54c64dfa3de636159bcf9fa0ed1 Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Mon, 2 Oct 2017 22:03:45 -0700 Subject: [PATCH 3/3] Pass explicit value for setDefaultSelected --- src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js b/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js index 3778d4092ed14..d35d0bf179ae8 100644 --- a/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js +++ b/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js @@ -180,7 +180,7 @@ var ReactDOMSelect = { node.multiple = !!props.multiple; var value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value); + updateOptions(node, !!props.multiple, value, false); } else if (props.defaultValue != null) { updateOptions(node, !!props.multiple, props.defaultValue, true); } @@ -197,14 +197,14 @@ var ReactDOMSelect = { var value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value); + updateOptions(node, !!props.multiple, value, false); } else if (wasMultiple !== !!props.multiple) { // For simplicity, reapply `defaultValue` if `multiple` is toggled. if (props.defaultValue != null) { updateOptions(node, !!props.multiple, props.defaultValue, true); } else { // Revert the select back to its default unselected state. - updateOptions(node, !!props.multiple, props.multiple ? [] : ''); + updateOptions(node, !!props.multiple, props.multiple ? [] : '', false); } } }, @@ -214,7 +214,7 @@ var ReactDOMSelect = { var value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value); + updateOptions(node, !!props.multiple, value, false); } }, };