diff --git a/fixtures/dom/src/components/fixtures/selects/index.js b/fixtures/dom/src/components/fixtures/selects/index.js index 31d7f4436d7f..174fc32fb25d 100644 --- a/fixtures/dom/src/components/fixtures/selects/index.js +++ b/fixtures/dom/src/components/fixtures/selects/index.js @@ -159,6 +159,25 @@ class SelectFixture extends React.Component { + + + First selected option should be visible + + +
+
+ +
+
+
+ diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js index 27876e51b62a..3928541fda88 100644 --- a/packages/react-dom/src/client/ReactDOMFiberComponent.js +++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js @@ -384,6 +384,15 @@ export function createElement( // See discussion in https://github.com/facebook/react/pull/6896 // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240 domElement = ownerDocument.createElement(type); + // Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple` + // attribute on `select`s needs to be added before `option`s are inserted. This prevents + // a bug where the `select` does not scroll to the correct option because singular + // `select` elements automatically pick the first item. + // See https://github.com/facebook/react/issues/13222 + if (type === 'select' && props.multiple) { + const node = ((domElement: any): HTMLSelectElement); + node.multiple = true; + } } } else { domElement = ownerDocument.createElementNS(namespaceURI, type);