Make sure that select has multiple attribute set to appropriate s…

…tate before appending options (#13270) * Make sure that `select` has `multiple` attribute set to appropriate state before appending options fixes #13222 * Add dom test fixture to test long multiple select scrolling to the first selected option fixes #13222 * typo fix * update comment remove redundant conversion to bool type * change a way of assigning property to domElement * Remove unused ref on select fixture form
facebook · Aug 3, 2018 · 2d0356a · 2d0356a
1 parent b179bae
commit 2d0356a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git 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 {
           </div>
         </TestCase>
 
+        <TestCase title="A multiple select being scrolled to first selected option">
+          <TestCase.ExpectedResult>
+            First selected option should be visible
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <form>
+              <select multiple defaultValue={['tiger']}>
+                <option value="gorilla">gorilla</option>
+                <option value="giraffe">giraffe</option>
+                <option value="monkey">monkey</option>
+                <option value="lion">lion</option>
+                <option value="mongoose">mongoose</option>
+                <option value="tiger">tiget</option>
+              </select>
+            </form>
+          </div>
+        </TestCase>
+
         <TestCase
           title="An option which contains conditional render fails"
           relatedIssues="11911">

diff --git 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);