Make sure that `select` has `multiple` attribute set to appropriate state 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
Dmytro Zasyadko committed
Aug 3, 2018 at 19:05 UTC
2d0356a5243b880a8bff853a6bbde97f223dbacf
2 files changed
+28
fixtures/dom/src/components/fixtures/selects/index.js
+19
@@ -159,6 +159,25 @@ class SelectFixture extends React.Component {
159
</div>
160
</TestCase>
161
162
+ <TestCase title="A multiple select being scrolled to first selected option">
163
+ <TestCase.ExpectedResult>
164
+ First selected option should be visible
165
+ </TestCase.ExpectedResult>
166
+
167
+ <div className="test-fixture">
168
+ <form>
169
+ <select multiple defaultValue={['tiger']}>
170
+ <option value="gorilla">gorilla</option>
171
+ <option value="giraffe">giraffe</option>
172
+ <option value="monkey">monkey</option>
173
+ <option value="lion">lion</option>
174
+ <option value="mongoose">mongoose</option>
175
+ <option value="tiger">tiget</option>
176
+ </select>
177
+ </form>
178
+ </div>
179
+ </TestCase>
180
+
181
<TestCase
182
title="An option which contains conditional render fails"
183
relatedIssues="11911">
packages/react-dom/src/client/ReactDOMFiberComponent.js
+9
@@ -384,6 +384,15 @@ export function createElement(
384
// See discussion in https://github.com/facebook/react/pull/6896
385
// and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
386
domElement = ownerDocument.createElement(type);
387
+ // Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple`
388
+ // attribute on `select`s needs to be added before `option`s are inserted. This prevents
389
+ // a bug where the `select` does not scroll to the correct option because singular
390
+ // `select` elements automatically pick the first item.
391
+ // See https://github.com/facebook/react/issues/13222
392
+ if (type === 'select' && props.multiple) {
393
+ const node = ((domElement: any): HTMLSelectElement);
394
+ node.multiple = true;
395
+ }
396
}
397
} else {
398
domElement = ownerDocument.createElementNS(namespaceURI, type);