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)}> + + +
    +
    +
    ); } diff --git a/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js b/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js index 098826fa86093..d35d0bf179ae8 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) { @@ -173,9 +180,9 @@ 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); + updateOptions(node, !!props.multiple, props.defaultValue, true); } }, @@ -190,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); + 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); } } }, @@ -207,7 +214,7 @@ var ReactDOMSelect = { var value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value); + updateOptions(node, !!props.multiple, value, false); } }, };