New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Don't set the first option as selected in select tag with size
attribute
#14242
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -398,14 +398,25 @@ 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. | ||
// Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple` and `size` | ||
// attributes 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 #13222 | ||
// - a bug where the `select` set the first item as selected despite the `size` attribute #14239 | ||
// See https://github.com/facebook/react/issues/13222 | ||
if (type === 'select' && props.multiple) { | ||
// and https://github.com/facebook/react/issues/14239 | ||
if (type === 'select') { | ||
const node = ((domElement: any): HTMLSelectElement); | ||
node.multiple = true; | ||
if (props.multiple) { | ||
node.multiple = true; | ||
} else if (props.size) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I tested in Chrome and noticed that when a select element is marked as |
||
// Setting a size greater than 1 causes a select to behave like `multiple=true`, where | ||
// it is possible that no option is selected. | ||
// | ||
// This is only necessary when a select in "single selection mode". | ||
node.size = props.size; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Small thing, but could you add a comment indicating that assigning There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It sounds like, this does essentially the same thing as setting |
||
} | ||
} | ||
} | ||
} else { | ||
|
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
Sorry, something went wrong.